How to vertically align images inside a list


Tags: html,css,vertical-alignment

Problem :

vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.

I have this html:

<ul id="council-slider">
  <li class="col-md-12" style="display: block">
    <img src="somesource" />
    <div class="council-spacer"></div>
    <p>text content goes here</p>
  </li>
</ul>

CSS:

#council-slider {
    margin: 0 auto;
    list-style: none;
    min-height: 300px;
    max-height: 400px;
}

#council-slider li img {
    float: left;
    height: auto;
    width: 25%;
    margin: 5px;
}

.council-spacer {
    height: 300px;
    width: 100px;
    float: left;
}

#council-slider li p {
    margin-top: 100px;
}

I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.

There are multiple list items; I just used one in the example to simplify and reduce the html.



Solution :

You should read up on where the vertical-align property has the ability to be applied.

Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.

You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle

Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3

.valign-middle {
   position: relative;
   top: 50%;
   Transform: translateY (-50%);
}

The way this works -

  • Set position relative to the parent/container (i.e. <li> in your case)
  • Move the image that you want to vertically align, down 50% of the container height
  • Move the image up 50% of the height of the image

    CSS Howto..

    How can I set a Horizontal! scroll bar for my Github page under this bootstrap theme? [closed]

    How to prevent corners on CSS box-shadow?

    How to change the width of displayed text nested in a div?

    CSS: How to set the width and height dependent on the screen/window size?

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    How to make CSS width to fill parent?

    How do I align a dropdown menu below a
    ?

    How to get highlighted words and wrap it in new element with data-attribute?

    jQuery hide() method do show element with display:none !important

    How to turn off carousel when resized?

    How to override CSS style for a specific element if its parent has a specific class

    jQuery .css, how to translate it into Javascript

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to apply css transform on iOS without using -webkit-transform?

    how to position a container in the middle of the screen? [duplicate]

    How to define CSS rules relative to previously defined values witout re-writing them?

    how to make a floating div disappear for smaller screens?

    How to make CSS image transition smooth?

    How to set a image/icon width that was specified through css content property?

    How do I chain an infinite css animation to a one-time css animation?

    Tizen - how to change button font-size - fixed

    How to use same css for separate media query conditions

    How can I make the text stop moving when one DIV opens?

    How to remove or reset CSS style using JS?

    How can I create CSS sprites from images stored in the database?

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    How to add css to a single mvc Helper method when validation fails - from within the model

    How to use CSS float without hiding parts of a DIV

    How do I draw the lines of a family tree using HTML CSS?

    How to show blocks for progressbar using CSS