Image won't vertically align middle

  • colourblue

    (@colourblue)


    11 years ago

    I am trying to vertically align an image in the middle, but it stubbornly stays at the top.

    The image is in the quarter column to the left of a 3 quarter column Revolution slider.

    Within Chrome Developer tools, I have tried adding the following to the image and also surrounding Div.

      vertical-align:middle; and also
      display: inline-block;

    The page is at http://www.thehubcentral.org.uk/meet-church/

    Any help would be warmly appreciated.

    Thanks,

    Chris.

Viewing 5 replies - 1 through 5 (of 5 total)
  • papakia

    (@papakia)

    11 years ago

    Give an extra class to the one_fourth div’s surrounding the images called vertical-align.

    then in css:

    .vertical-algin {
     max-height: 480px;
     height: 346px;
     line-height: 346px;
     }
    Thread Starter colourblue

    (@colourblue)

    11 years ago

    Thanks very much Papakia. This works when I add the CSS in Developer Tools.

    I just need to understand how to add the class to the one_fourth Divs on that page only.

    Thread Starter colourblue

    (@colourblue)

    11 years ago

    Hi Papakia,

    I’ve got this to work by surrounding the one_fourth short codes with a div with that class.

    I’m no longer setting anything on the image or anything else to do the vertical align middle.

    However, I’m not sure why it works. Is the vertical align a default?

    Thanks,

    Chris.

    Thread Starter colourblue

    (@colourblue)

    11 years ago

    Also it, would be good if there was a way of achieving the alignment without making the height fixed, so that on a mobile, the images only take they space they need.

    Thanks, Chris.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    See http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Image won't vertically align middle’ is closed to new replies.