Question

这是fiddle。

来自解释here，此处How to use vertical-align: middle; properly?以及其他许多内容，但我只是想在所有div类中垂直对齐我的文本，这些div是该类的直接子级{{ 1}} ..

如果我添加样式为irow的图像，则后面的文字似乎是对齐的。如果我删除图像，则文本不再对齐。我尝试按照here提出的建议将文字置于vertical-align: middle;并将span应用于范围但未成功。我尝试使用hack vertical-align也没有成功。所以这里是对齐文本的解决方案，但是，当然，我想让它适用于所有div，而没有图像！

position:relative;top:50%

非常感谢任何帮助！

Answer 1

有两种方法： 1）使用img：

模拟:before的存在

.irow > div {
    height: 80px;
    min-height: 60px;
}
.irow > div:before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:0;
  height:80px;
}
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) {
  background-color: #2b669a;
}
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) {
  background-color: #46b8da;
}

<div class="irow">
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès va morfler grave
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès que des mots&nbsp;!
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
</div>

或2）只需将line-height用于单行文本（不适用于多行文字）：

.irow > div {
    height: 80px;
    min-height: 60px;
    line-height:80px;
}
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) {
  background-color: #2b669a;
}
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) {
  background-color: #46b8da;
}

<div class="irow">
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès va morfler grave
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
    <div class="col-md-8">
        <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg">
        Inès que des mots&nbsp;!
    </div>
    <div class="col-md-4">
        <a class="btn btn-default btn" href="#" role="button">Go »</a>
    </div>
</div>

老实说，还有很多方法，例如使用display:table-cell或展示flex，但我不喜欢它们

与div中的文本垂直对齐不起作用

1 个答案: