Question

我有一个div，我想在其中对齐一个span元素。 span元素应在其父div的底部和水平中心对齐。

＆＃13;

<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;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span></div>

＆＃13;

同时，我的span元素的对齐不起作用。 span元素的宽度将一直在变化。我的意思是它不是固定宽度的元素。

我正在寻求这方面的帮助，以及跨浏览器的解决方案。不允许使用JavaScript / jQuery。

Answer 1

.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>

Answer 2

这样的东西？

＆＃13;

.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; 
}

＆＃13;

<div class="holder">
  <span class="some">
    123.
  </span>
</div>

＆＃13;

Answer 3

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编辑器，它倾向于通过添加＆amp; nbsp html实体来内联css规则和空格文本，而不是使用水平填充和text-align：center;。我建议在类中添加这些规则并使用外部css样式表以获得更好的性能。

Answer 4

Flexbox可以做到这一点：

＆＃13;

div {
  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%;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

＆＃13;

<div>
  <span>&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
</div>

＆＃13;

Answer 5

在跨度上使用此CSS：

.y {
  display: inline-block;
  background-color: green;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
}

底部＆＃34;对齐高度＆＃34;可以使用bottom参数进行调整。

顺便说一句：跨度没有填充，这只是行高，以及你自己放置的不间断空格。

＆＃13;

.x {
  position: relative;
  clear: both;
  float: left;
  border: 2px solid #999999;
  margin: 1px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: url(/img/img60x60.gif) no-repeat;
}
.y {
  display: inline-block;
  background-color: green;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
}

＆＃13;

<div class="x">
  <span class="y">&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
</div>

＆＃13;

Answer 6

首先，谢谢大家的帮助。

最后我修改了@ashok和@Hardy的答案。我这样做了：

    <div style="display: table-cell;
      border: 2px solid #999999;
      padding: 0;
      margin: 1px;
      width: 60px;
      height: 60px;
      text-align: center;
      vertical-align: bottom;
      border-radius: 50%; 
      -webkit-border-radius: 50%; 
      -moz-border-radius: 50%; 
      background: url(/img/img60x60.gif) no-repeat;">
        <span style="position: relative; bottom: -4px; background-color: green;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
    </div>

在我看来，这工作正常。我将修改代码并将我的CSS代码放到外部文件中。

CSS并将一个span元素放在div中

6 个答案: