vertical-align only one inline block element

Question

I have 3 inline block elements, an image and two pieces of text. I would like to modify the class for only the image such that it is middle aligned while the other two text blocks remain top aligned. It seems to only work if I set .subImg to have vertical-align:top; and .subsection to have vertical-align:middle; but not the the other way around. Why is this and how could I fix it? Thanks

Here's the code:

DEMO

HTML

<div id="about">
    <div class="section">
            <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
            <div class="subsection">
                <h2>Blah</h2>
                <hr>
                <p>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
            </div>
            <div class="subsection">
                <h2>Blah</h2>
                <hr>
                <p> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
                </p>
            </div>
        </div>
</div>

CSS

.section{
    width: 100%;
    text-align: center;
    background-color:#fdfdfd;
 }

.subsection{
    vertical-align: top;
    margin: 20px;
    text-align: left;
    display: inline-block;
    max-width: 20%;
}

.subImg{
    vertical-align: middle;
    margin: 20px;
    text-align: left;
    display: inline-block;
    max-width: 20%;
}

The vertical align piece is answered here I believe, is this what you mean in your question?: - http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Jamie Paterson, Jan 27 '16 at 09:01

score 2 · Accepted Answer · edited Jan 27 '16 at 09:25

jsfiddle-link

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

Add div (vmid) with vertical align middle so this div and the image are middle aligned and inside vmid put the vertical aligned top element.

HTML

<div id="about">
  <div class="section">
    <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
    <div class="vmid">
      <div class="subsection">
        <h2>Blah</h2>
        <hr>
        <p> blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>
        </p>
      </div>
      <div class="subsection">
        <h2>Blah</h2>
        <hr>
        <p> blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>
        </p>
      </div>
    </div>
  </div>
</div>

CSS

.section {
  width: 100%;
  text-align: center;
  background-color: #fdfdfd;
}

.subsection {
  vertical-align: top;
  margin: 20px;
  text-align: left;
  display: inline-block;
  max-width: 20%;
}

.subImg {
  vertical-align: middle;
  margin: 20px;
  text-align: left;
  display: inline-block;
  max-width: 20%;
}

.vmid {
  display: inline-block;
  vertical-align: middle;
}

This definitely works, although when resizing the window the image can appear on top of the two text blocks. I was able to achieve a more responsive solution using `.subImg{ position: relative; top:10%; max-height: 80%; }` It's not perfectly centered, but it won't jump around when the window is resized — Stephan GM, Jan 27 '16 at 22:34

score 0 · Answer 2 · answered Jan 27 '16 at 08:38

You can use flexbox for this.

.section{
  display: flex;
  align-items: flex-start;
}

and for the image align it to center

.subImg{
  align-self: center;
}

Demo

Support

Take note of the flexbox support. It really good now but IE 9 and below do not support it.

Can I Use It

score 0 · Answer 3 · answered Jan 27 '16 at 08:44

You could use the display: table property on the parent of the elements you want to vertically align. Here's an updated fiddle with some adjustments to the HTML: https://jsfiddle.net/ud14uhub/

<div id="about">
  <div class="section">
    <div class="subImgwrap">
       <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
     </div>
     <div class="subsection">
       <h2>Blah</h2>
       <hr>
       <p>  blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
     </div>
     <div class="subsection">
       <h2>Blah</h2>
       <hr>
       <p>  blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
     </div>
  </div>
</div>

CSS:

.section{
    width: 100%;
  text-align: center;
  background-color:#fdfdfd;
  display: table;
}

.subsection, .subImgwrap {
  display: table-cell;
  float: none;
}

.subsection{
    vertical-align: top;
    text-align: left;
}
.subImgwrap {
  vertical-align: middle;
}
.subImg{
  text-align: left;
  width: 100px;
}

I wrapped the subImg into a wrapping div, which I've used to vertically align and not the image itself. The immediate parent of both .subsection and .subImgwrap I set to display: table, and set the children to display: table-cell. This makes vertical aligning much easier and more robust across all browsers.

vertical-align only one inline block element

HTML

CSS

3 Answers3

Support