不停留在一個圓圈內的內容

我無法將我的內容保留在我的div中，這是一個圓圈。 HTML跳出它的容器並嘗試將自己與圖像內部的內容對齊。任何想法如何保持在那裏？我正在使用谷歌瀏覽器。不停留在一個圓圈內的內容

預先感謝您！

愛知道我可以來這裏，並問我最親密的在線朋友尋求幫助。

<div class="wrapper"> 
<div class="logo"> 
    <div style="padding-top: 3%;"> 
     <p class="RST" data-height="50" style="line-height: 90%;">welcome</p> 
     <p class="RST" data-height="50" style="font-weight: bold; line-height: 90%">manager</p> 
    </div> 
</div> 

    <div class="square teal" style="width: 50%; height: 27.5%; float:left;"> 
     <img src="img/dollar.png"/> 
     <p class="RST" data-height="20";>rent<br>managment</p> 
    </div> 

    <div class="square lightGreen" style="width: 50%; height: 27.5%; float:right;"> 
     <img src="img/tenant.png"/> 
     <p class="RST" data-height="20";>tenant<br>managment</p> 
    </div> 


    <div class="square lightGreen" style="width: 50%; height: 27.5%; float:left;"> 
     <img src="img/wrench.png"/> 
     <p class="RST" data-height="20";>manage<br>managment</p> 
    </div> 

    <div class="square teal" style="width: 50%; height: 27.5%; float:right;"> 
     <img src="img/pages.png"/> 
     <p class="RST" data-height="20";>contract<br>managment</p> 
    </div> 

<div class="circle"> 
    <p>center<br>picture</p> 
</div>

*{ 
    margin: 0px; 
    padding: 0px; 
} 

#mainWrapper{ 
    background-image: url('../img/wheat.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    font-family: 'Didact Gothic', sans-serif; 
    letter-spacing: 2px; 
    width: 100%; 
    height: 100%; 
} 

.wrapper{ 
    position: absolute; 
    left: 32%; 
    right: 32%; 
    top: 5%; 
    bottom: 10%; 
    text-align: center; 
    height: 466.2px; 
} 

.logo{ 
    width: 100%; 
    height: 25%; 
    color: #4a9682; 
} 

.logo img{ 
    height: 95%; 
} 

.logoP{ 
    line-height: .8; 
} 

.generalBox{ 
    width: 100%; 
    color: rgba(255,255,255,0.5); 
    outline: 0px solid transparent; 
    vertical-align:middle; 
    padding-top: 4%; 
    padding-bottom: 2%; 
} 

.generalBox img{ 
    height: 75%; 
    opacity: 0.5; 
} 

.generalBox p{ 
    display: inline; 
    position: relative; 
    bottom: 15%; 
    left: 1%; 
} 

.square{ 
    color: rgba(255,255,255,0.5); 
    outline: 0px solid transparent; 
    vertical-align:middle; 
    padding-top: 4%; 
    padding-bottom: 2%; 
} 

.square img{ 
    height: 60%; 
    opacity: 0.5; 
} 

.circle{ 
    background-image: url('../img/nial.png'); 
    width: 20%; 
    height: 22.5%; 
    border-radius: 100%; 
    position: relative; 
    top:23%; 
    left: 40%; 
    border-style: solid; 
    border-width: 5px; 
    border-color:rgba(255, 255, 255,0.9); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

.circle p{ 
    font-size: 10px; 
    display: inline-block;  
} 

/**************************************** 
Colors 
*****************************************/ 
.teal{background-color:rgba(82,131,158,0.9);} 
.purple{background-color:rgba(113,141,197,0.9);} 
.lightBlue{background-color:rgba(140,220,239,0.9);} 
.darkGreen{background-color:rgba(109,179,175,0.9);} 
.lightGreen{background-color:rgba(76,201,182,0.9);} 
. 

.signUp{ 
    width: 100%; 
    height: 10%; 

}

來源

2013-08-24 Austin Lovell

你應該在這裏發佈相關的HTML標記和CSS代碼中的問題 –

您使用的是什麼瀏覽器？在Safari和Firefox中運行良好。另外，發佈你的代碼，否則我們應該如何幫助？我最初的猜測是，您使用的瀏覽器不支持CSS3 border-radius ...您是否嘗試過跨瀏覽器廠商前綴？ – samrap

添加/更改以下屬性值。

.circle{ 
display: table; 
} 

.circle p{ 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2013-08-24 22:31:51 Jeffpowrs

不停留在一個圓圈內的內容

回答

相關問題