如何垂直对齐图像？ [复制]

Question

我一直在尝试使用 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" width="300px" height="100px" style="vertical-align:middle; margin:50% 0px" />
</div>

我认为我的代码中有很多不必要的东西，但我还是前端开发的新手。我想垂直对齐图像。我该怎么做？

Answer 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" width="300px" height="100px" style="vertical-align:middle;" />
</div>

Answer 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>

Answer 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" width="300px" height="100px"/>
</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" width="300px" height="100px"/>
</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" width="300px" height="100px"/>
</div>