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 to set the select to have the width of the selected option

    CSS image rollover map and jQuery : how to use a second li list?

    How to manually override CSS @media queries?

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How to add CSS to page to the bottom of the custom chrome extension

    How do you apply a fading overlay to an image in CSS?

    How to Apply CSS to Facebook Login Button [closed]

    How to make the divider between two tbody elements moveable

    How to add gradient to font face (CSS)?

    How to include css in my JSP?

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How to change content of css using jQuery toggle

    How to Implement different backgrounds on scroll [closed]

    how to vertically align div opposite to each other

    How to share CSS StyleSheet amongst projects?

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    How to edit HTML with CSS? [closed]

    How to make the table use multiple lines on long text using css

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    how to make input and select look nice beside eachother with custom height?

    How to center text next to a responsive image in Bootstrap3

    how to make this “div” always visible to users

    How to remove the text from this html

    How can I get list of all element css attributes with jQuery?

    How to calculate percentages in LESS CSS?

    How to override a filter:none in CSS

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to center an image in an img tag using CSS background position

    How to prevent image moving when resizing window

    How to apply jQuery on css selector :before [duplicate]