2016-12-14 40 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>