CSS和在div中定位span元素
CSS和在div中定位span元素
提问于 2016-08-10 04:45:22
我有一个div，我想在它里面对齐一个span元素。span元素应该在其父div的底部和水平中心对齐。
<div style="position: relative; clear: both; float: left; border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;">
<span style="border: none; background-color: green; margin: 0; padding: 0; border: 0; position: absolute; margin-left: auto; margin-right: auto; bottom: 0;"> 123. </span></div>
同时，我的span元素的对齐不起作用。span元素的宽度将一直改变。我的意思是它不是一个固定宽度的元素。
我正在寻找这方面的帮助，以及一个跨浏览器的解决方案。不允许使用JavaScript/jQuery。
回答 6
Stack Overflow用户
发布于 2016-08-10 05:10:37
.holder {
display: table;
border: 2px solid #999999;
padding:0;
margin: 1px;
width: 60px;
height: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: #00ff00;
}
.some {
display: table-cell;
vertical-align: bottom;
text-align: center;
border: none; }
<div class="holder">
<span class="some">
123.
</span>
</div>Stack Overflow用户
发布于 2016-08-10 04:55:09
像这样的东西？
.holder {
display: table;
border: 2px solid #999999;
padding:0;
margin: 1px;
width: 60px;
height: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: #00ff00;
}
.some {
display: table-cell;
vertical-align: bottom;
text-align: center;
border: none;
}<div class="holder">
<span class="some">
123.
</span>
</div>
Stack Overflow用户
发布于 2016-08-10 05:31:43
firefox中没有添加填充。在这种情况下，文本两侧的空格是由span标记中的字符设置的，因此您得到的不同结果可能是由于浏览器之间的字体呈现差异造成的。使用CSS Reset应该可以解决这个问题。试试这个：
<div style="border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;">
<span style="background-color: green; display:inline-block; margin-top:45px;margin-left:16px;">123.</span></div>另外，看看代码，你会发现你使用的是WYSIWYG编辑器，它倾向于通过添加html实体来内联css规则和空白文本，而不是使用水平填充和text-align:center；。我建议在类中添加这些规则，并使用外部css样式表以获得更好的性能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38860111
复制相关文章
相似问题
腾讯云开发者
