在 div 内对齐跨度

Question

我正在寻找一种方法来确保所有标签的底部边框都相同 space。（它应该看起来像图片，而不是 fiddle）

目标：

我的CSS:

.outerDiv {
    text-align: center;
    /*display: inline-block;*/
    float: left;
    border-radius: 10px;
    border: 2px solid #c3c3c3;
    height: 100px;
    width: 100px;
    margin: 5px;
}

.innerDiv {
    width: 80%;
    height: 100%;
    line-height: 50px;
    margin: 0 auto;
}

.errorLabel {
    background-color: #a90329;
    padding: .2em .6em .3em;
    font-size: 100%;
    color: #fff;
    border-radius: .25em;
    line-height: 1;
    vertical-align: baseline;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
}

Answer 1

由于您的 display: block，您的垂直对齐没有任何影响。

尝试将垂直对齐更改为 "bottom" 并将显示更改为 "inline-block"。然后调整你的臀部 margin/padding 到你想要的！

.errorLabel {
    background-color: #a90329;
    padding: .2em .6em .3em;
    font-size: 100%;
    color: #fff;
    border-radius: .25em;
    line-height: 1;
    vertical-align: bottom;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 0.5em;
    width: 100%;
}

编辑： 添加宽度：100%；以保持标签的全宽。

正如@RokoC.Buljan 在评论中的示例中指出的那样，这可以通过清洁器 CSS 来完成。我上面的例子只是对 OP 的原始代码的一些小修改（以防那些类也在其他地方使用）。 :)

Answer 2

绝对定位似乎是合乎逻辑的选择。

.errorLabel {
    background-color: #a90329;
    padding: .2em .6em .2em;
    font-size: 100%;
    color: #fff;
    border-radius: .25em;
    line-height: 1;
    vertical-align: baseline;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    margin-bottom: 5px;
}

.outerDiv {
  text-align: center;
  /*display: inline-block;*/
  float: left;
  border-radius: 10px;
  border: 2px solid #c3c3c3;
  height: 100px;
  width: 100px;
  margin: 5px;
}
.innerDiv {
  width: 80%;
  height: 100%;
  line-height: 50px;
  margin: 0 auto;
  position: relative
}
.errorLabel {
  background-color: #a90329;
  padding: .2em .6em .2em;
  font-size: 100%;
  color: #fff;
  border-radius: .25em;
  line-height: 1;
  vertical-align: baseline;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
}

<div class="outerDiv">
  <div class="innerDiv"> <span>123123</span>
    <span class="errorLabel">OK</span>

  </div>
</div>
<div class="outerDiv">
  <div class="innerDiv"> <span>123123</span>
    <span class="errorLabel">Error2</span>

  </div>
</div>
<div class="outerDiv">
  <div class="innerDiv"> <span>123123</span>
    <span class="errorLabel">
            Line1<br/>
            Line2
        </span>

  </div>
</div>
<div class="outerDiv">
  <div class="innerDiv"> <span>123123</span>
    <span class="errorLabel">
            Line1<br />
            Line2
        </span>

  </div>
</div>

Answer 3

您可以fiddle用底数：

http://jsfiddle.net/z7hL3any/5/

添加：

.errorLabel {
position: relative;
}

.innerDiv {  
position: absolute;
bottom: 5px;
width: 100%; }

Answer 4

试试这个

    .errorLabel {
    background-color: #a90329;
    border-radius: 0.25em;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 100%;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0.2em 0.6em 0.3em;
    position: absolute;
    text-align: center;
    vertical-align: baseline;
    width: 100%;
}

。它也应该有效

在 div 内对齐跨度

Align span inside of div

html

css

alignment