Question

我有这个包含两个内联div的html：

HTML

＆＃13;

div.inline {
  display: inline-block;
}

＆＃13;

<div class="inline">
  <img src="http://via.placeholder.com/350x150" />
</div>

<div class="inline">
  <h1 class="title"> TOPIC </h1>
</div>

＆＃13;

图像和h1并排显示正确。现在我希望h1垂直居中。应该是这样的事情

+----------+
|          |
|   IMG    |    TOPIC 
|          |
+----------+

我该怎么做？

Answer 1

只需使用vertical-align:middle，因为它会水平对齐元素。

＆＃13;

div.inline {
        display: inline-block;
        vertical-align:middle;
}

＆＃13;

<div class="inline">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwswZVnaDs2Sn9AyTVbEhdfGc3cCr3tbh_tiytTGd_cJf1d8_a" />
</div>

<div class="inline">
    <h1 class="title"> TOPIC </h1>
</div>

＆＃13;

Answer 2

你可以使用flex

＆＃13;

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="container">
    <div class="inline">
		<img src="http://via.placeholder.com/350x150" />
    </div>

	<div class="inline">
		<h1 class="title"> TOPIC </h1>
	</div>
</div>

＆＃13;

供参考：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

只需将vertical-align: middle;添加到您的班级（display为inline-block时有效）：

div.inline {
        display: inline-block;
        vertical-align: middle;
}

<div class="inline">
    <img src="http://placehold.it/120x120/fe2" />
</div>

<div class="inline">
    <h1 class="title"> TOPIC </h1>
</div>

Answer 4

在你的第二个div上应用这种风格：

div.inline{
    vertical-align: middle;
}

Answer 5

使用引导程序的答案：

用d-flex，h-100，justify-content-center，align-items-center将div包裹在div中

示例：

<div class="d-flex h-100 justify-content-center align-items-center>
  <h1>heading</h1>
</div>

Answer 6

在css中使用内联高度属性

inline-height:500px; // height of parents div

HTML垂直居中h1

6 个答案: