我有一个HTML代码
<div class="left"> <span class="panelTitleTxt">Title text</span> </div>
我的CSS如下
.left { background-color: #999999; height: 50px; width: 24.5%; } span.panelTitleTxt { display: block; width: 100%; height: 100%; }
现在我如何对齐div中的span文本? (假设%转换后的“左”div的像素宽度为100像素)
我尝试使用margin:auto的标准方式,但是这不行。
我也想避免使用text-align:center。
还有其他一些修复方法吗?
解决方法
您将跨度的宽度设为100%,使其扩展到父级的大小。这意味着你不能对齐它,因为没有空间来移动它。
您可以将span设置为宽度,然后再次添加margin:0 auto。这将对齐它。
.left { background-color: #999999; height: 50px; width: 24.5%; } span.panelTitleTxt { display:block; width:100px; height: 100%; margin: 0 auto; }