How to vertically align image?

Question

I have been trying to play around with CSS but still can't get this right.

What I am trying to make:

Basically, the content area is the 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;
}

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

I think there are many unnecessary things on my code, but I am still new to front end dev. I would like to vertically-align the image. How can I do that?

Answer 1

You can achieve this using flexbox, and remove margin from 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

Add a flex rule to the div.logo-content-background2 selector. Add a new selector div.logo-content-background2 img and add the height: auto rule to it, so that your image is proportional. And remove and the tag img (html structure) this line - style = "vertical-align: middle; margin: 50% 0px". Tip: if you want your picture to be centered horizontally, then add the margin: auto rule to the div.logo-content-background2 img selector or justify-content: center to div.logo-content-background2 selector.

In css I poured what I added. I gave you three solutions (three snippets):

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>

The second solution with adjusting the aspect ratio of the picture:

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>

In this solution, your picture is proportional to the left block. Add width: 80%, height: 60% and object-fit: cover rule to div.logo-content-background2 img selector:

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>

Answer 3

You did it on the left side. You just have to repeat it but the right side!

I copied the code that is for the left side and just added style ="left: 0;" on element class="logo-content-block"

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>