垂直对齐 100% 宽度图像顶部的两列布局
Vertical align two column layout on top of 100% width image
我有这样的场景,我想要一张宽度为 100% 的图像作为背景。接下来我想在图像中间对齐两列布局文本。我使用 display table cell 和 vertical align: middle 但它没有按预期工作。
预期结果是两列布局在中间。
注意:图片必须作为背景,宽度100%,高度根据浏览器宽度缩放。
* {
margin: 0;
padding: 0;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
<div style="display: table; vertical-align: middle; padding-top: 100px;">
<div style="display: table-cell; width: 120px;">
Left Column
</div>
<div style="display: table-cell;">
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
如果 flexbox
是一个选项,可以很容易地删除 table 并使用这个:
display: flex;
justify-content: center;
align-items: center;
height: 100%;
请注意,我已删除内联样式并在 类 中添加以供说明:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div class="container">
<div class="wrapper">
<div style="width: 120px;">
Left Column
</div>
<div>
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
如果您想坚持使用 tables,这里是解决方案:
将 height: 100%
添加到 table
并将 vertical-align: middle
添加到 table-cell
以实现垂直对齐。
水平对齐添加margin: 0 auto
。
下面的演示:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
display: table;
vertical-align: middle;
height: 100%;
margin: 0 auto;
}
.wrapper > div {
display: table-cell;
vertical-align: middle;
}
.wrapper > div:first-child {
width: 120px;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div class="container">
<div class="wrapper">
<div>
Left Column
</div>
<div>
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
像这样?,文本现在也居中了,我删除了 padding-top 这样单元格在垂直和水平方向上都居中:jsfiddle
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
<div style="display: table; vertical-align: middle; width:100%;text-align:center;height:100%">
<div style="display: table-cell; vertical-align: middle;">
Left Column
</div>
<div style="display: table-cell; vertical-align: middle;">
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
我有这样的场景,我想要一张宽度为 100% 的图像作为背景。接下来我想在图像中间对齐两列布局文本。我使用 display table cell 和 vertical align: middle 但它没有按预期工作。
预期结果是两列布局在中间。 注意:图片必须作为背景,宽度100%,高度根据浏览器宽度缩放。
* {
margin: 0;
padding: 0;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
<div style="display: table; vertical-align: middle; padding-top: 100px;">
<div style="display: table-cell; width: 120px;">
Left Column
</div>
<div style="display: table-cell;">
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
如果 flexbox
是一个选项,可以很容易地删除 table 并使用这个:
display: flex;
justify-content: center;
align-items: center;
height: 100%;
请注意,我已删除内联样式并在 类 中添加以供说明:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div class="container">
<div class="wrapper">
<div style="width: 120px;">
Left Column
</div>
<div>
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
如果您想坚持使用 tables,这里是解决方案:
将
height: 100%
添加到table
并将vertical-align: middle
添加到table-cell
以实现垂直对齐。水平对齐添加
margin: 0 auto
。
下面的演示:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrapper {
display: table;
vertical-align: middle;
height: 100%;
margin: 0 auto;
}
.wrapper > div {
display: table-cell;
vertical-align: middle;
}
.wrapper > div:first-child {
width: 120px;
}
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div class="container">
<div class="wrapper">
<div>
Left Column
</div>
<div>
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>
像这样?,文本现在也居中了,我删除了 padding-top 这样单元格在垂直和水平方向上都居中:jsfiddle
<div style="position: relative;">
<img src="https://www.math.nmsu.edu/~pmorandi/math112f00/graphics/rectangle.gif" style="width: 100%; line-height: 0;" />
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
<div style="display: table; vertical-align: middle; width:100%;text-align:center;height:100%">
<div style="display: table-cell; vertical-align: middle;">
Left Column
</div>
<div style="display: table-cell; vertical-align: middle;">
<p>
Right Column Top
</p>
<p>
Right Column Bottom
</p>
</div>
</div>
</div>
</div>