2016-12-14 26 views
0

我在將圓圈文本置於正確位置時出現問題。特別是它的垂直位置。它應該垂直和水平居中。那必須改變。文本跨度內部,未正確定位

我想在頁面中間得到一個按鈕。其他兩個div將在稍後填寫。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}
<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>

很可能一個簡單的辦法。感謝您的時間。

回答

0

在這種情況下,您可以使用line-height屬性對垂直對齊進行調整。請參閱下面的代碼片段。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}
<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>