Question

我有三个div，我希望它们彼此并排显示并居中。它是图像，1px分频器然后文本。我希望它们与它们旁边的那些相比是垂直居中的。

HTML

    <div class="sub-logo-wrap">
        <div class="sub-logo"><img src="..." width="auto" height="30px" /></div>            
        <div class="divider"></div>
        <div class="sub-logo-text"><p>text ... can be more than one line ... </p></div>
    </div>

CSS

.sub-logo-wrap > div { 
  display: inline-block; 
}

.divider { 
  width: 1px;
  height: 20px;
}

.sub-logo-text { 
  width: 150px; 
}

问题是当文本转到多行时，文本的居中不再起作用

Answer 1

这很容易做到。

.sub-logo-wrap > div {
    display: inline-block;
    vertical-align: middle;
}

的 JSFIDDLE DEMO

如果您需要额外的准确度，请添加此项。

.sub-logo img { display: block; }

或者

.sub-logo img { vertical-align: top; }

Answer 2

尝试：

.sub-logo-wrap > div { 
  display: inline-block; 
  vertical-align: top;
}
.sub-logo-text {
  line-height: 30px; /* Image height */ 
  width: 150px; 
}

您也可以使用flexbox：

.sub-logo-wrap {
 display: flex;
 flex-direction: row;
 align-items: center;
 align-content: center;
}
.sub-logo-wrap > div {
 /* No need to add display: inline-block */
}

display：内联块和垂直居中

2 个答案: