内联块 div 的垂直对齐错误 [重复]答案

【问题标题】：Wrong vertical alignment of inline-block divs [duplicate]内联块 div 的垂直对齐错误 [重复]
【发布时间】：2016-05-06 14:20:14
【问题描述】：

我有一些内联块 div，我希望它们排成一行，而不是像现在这样高出另一个。

这里是网页最重要的部分：

HTML：

<div id="hand">
    <div class="card">Y += 1;<br></div>
    <div class="card">if ( Y == 6 &amp;&amp; X &lt; 2 &amp;&amp; X &gt; -2) {<br> Y *= -1;<br> X -= 5;<br> } </div>
</div>

CSS：

#hand {
position: absolute;
display: block;
bottom: 0;
height: 400px;
width: 100%;
text-align: center;
padding-bottom: 60px;
}
.card {
text-align: left;
position: relative;
bottom: 0;
display: inline-block;
width: 200px;
height: 150px;
padding: 30px;
box-shadow: 0 0 0 3px rgb(200,200,200);
border-radius: 10px;
margin: 0 20px;
}

我为你们准备了fiddle。

编辑：

我注意到顶部 div 的最底部字符与底部 div 的最顶部字符的高度相同。也许是文字？

【问题讨论】：

标签： html css

【解决方案1】：

display: inline-block 将您的卡片垂直对齐其中文本的底部（基线），因为 vertical-align 的默认值（“初始值”）是 基线 em>。

将 vertical-align: top 添加到它的 CSS 中，所有内容都应该排列整齐。

【讨论】：

一旦垂直对齐设置正确，OP 也不需要position:relative 或bottom:0。

【解决方案2】：

我在你的卡片类中添加了浮点数。如果您想将其对齐到中心，请使用 margin: auto; 作为父 div。

* {
	margin: 0;
	padding: 0;
}
html, body {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
#hand {
	position: absolute;
	display: block;
	bottom: 0;
	height: 400px;
	width: 100%;
	text-align: center;
	padding-bottom: 60px;
}
.card {
	text-align: left;
	bottom: 0;
	display: inline-block;
	width: 200px;
	height: 150px;
	padding: 30px;
	box-shadow: 0 0 0 3px rgb(200,200,200);
	border-radius: 10px;
	margin: 0 20px;
  float: left;
}

<div id="hand">
  <div id="1" class="card 0">Y += 1;<br></div>
  <div id="0" class="card 1">if ( Y == 6 &amp;&amp; X &lt; 2 &amp;&amp; X &gt; -2) {<br> Y *= -1;<br> X -= 5;<br>} </div>
</div>

【讨论】：

但是它们应该在中间对齐
float 现在几乎总是一个糟糕的解决方案选择，因为它会将浮动块从流中拉出；如果您是浮动，您可以将显示保留为block。 inline-block 或 flex 布局会做得更好。