Question

我正在寻找一种方法来确保所有标签与底部边框具有相同的空间。（它应该看起来像图像，而不是小提琴）

目标：

enter image description here

我的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

由于您的显示，您的垂直对齐没有任何影响：阻止。

尝试将vertical-align更改为“bottom”并显示为“inline-block”。然后根据您的需要调整底部边距/填充！

.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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以摆弄最低金额：

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内部的跨度

4 个答案: