如何垂直对齐图像？ [复制]
Posted
技术标签:
【中文标题】如何垂直对齐图像？ [复制]【英文标题】：How to vertically align image? [duplicate] 【发布时间】：2021-02-25 03:52:46 【问题描述】：我一直在尝试使用 CSS，但仍然无法做到这一点。
我想做什么：
基本上，内容区域就是图片。
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" style="vertical-align:middle; margin:50% 0px" />
</div>我认为我的代码中有很多不必要的东西，但我还是前端开发的新手。我想垂直对齐图像。我该怎么做？
【问题讨论】：
【参考方案1】：您可以使用 flexbox 实现此目的，并从 image 中删除边距
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
display: flex;
align-items: center;
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" style="vertical-align:middle;" />
</div>【讨论】：
【参考方案2】：你是在左边做的。你只需要重复它，但右边！
我复制了左侧的代码，并在元素 class="logo-content-block" 上添加了 style ="left: 0;"
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
div.logo-content-background2 div.logo-content-block
background: url('http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg') no-repeat;
background-size: cover;
background-position: center center;
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable
ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a
150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your
adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<div class="logo-content-block" style="left: 0;">
<div class="content-description">
</div>
</div>
</div>【讨论】：
【参考方案3】：将flex 规则添加到div.logo-content-background2 选择器。添加一个新的选择器div.logo-content-background2 img 并向其中添加height: auto 规则，这样你的图像就成比例了。并删除标签img（html结构）这一行-style = "vertical-align: middle; margin: 50% 0px"。提示：如果您希望图片水平居中，请将margin: auto 规则添加到div.logo-content-background2 img 选择器或justify-content: center 到div.logo-content-background2 选择器。
在 css 中我倒了我添加的内容。我给了你三个解决方案（三个 sn-ps）：
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
display: flex; /*add this it*/
align-items: center; /*add this it*/
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
div.logo-content-background2 img
height: auto; /*add this it*/
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
</div>调整图片纵横比的第二种方案：
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
display: flex; /*add this it*/
align-items: center; /*add this it*/
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
div.logo-content-background2 img
width: auto; /*add this it*/
height: auto; /*add this it*/
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
</div>在此解决方案中，您的图片与左侧块成比例。将width: 80%、height: 60% 和object-fit: cover 规则添加到div.logo-content-background2 img 选择器：
div.logo-content-background
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: #577fa1;
z-index: 1;
div.logo-content-block
background: #f3f2f0;
width: 80%;
height: 60%;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0, -50%);
div.content-description
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
div.logo-content-background2
display: flex; /*add this it*/
align-items: center; /*add this it*/
position: fixed;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: #f3f2f0;
z-index: 2;
div.logo-content-background2 img
width: 80%; /*add this it*/
height: 60%; /*add this it*/
object-fit: cover; /*add this it*/
<div class="logo-content-background">
<div class="logo-content-block">
<div class="content-description">
<h3>
CLIF Bar
</h3>
<p>
CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
</p>
</div>
</div>
</div>
<div class="logo-content-background2">
<img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
</div>【讨论】：
以上是关于如何垂直对齐图像？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章