Vertical centering

Hi peterfz30,

Vertical positioning can be quite tricky and will require additional CSS. If you can provide me with a live link to your site, I should be able to point you in the right direction.

Nick

Thank you Nick,
I really appreciate any help I can get.

The link is: https://fspc.com.au/about-us/

I am trying to vertically center each image on the right apart from the bottom two so it works on a desktop and also in a responsive mode.

I watched your video and was experimenting with using a class but it didn’t quite work the way I hoped.

Hi peterfz30,

This is a very tricky CSS issue. I have a “solution” that worked after extensive research, but I am not sure it is worth implementing. I will leave that up to you. Vertically centering content in a floated div with unknown height that needs to be based on the height of the floated div on the left is challenging, but here we go…

The first thing you need to do is wrap each column block in a Columns Container shortcode. This is available under the Utility shortcode. Once wrapped add a class to the columns container, I used centered-container. Then you will need to add a class to the column that needs the image centered. It should look something like [one-third class="centered-column"]. So you should end up with the following:

[columns-container class="centered-container"]
  [two-thirds-first]
    Your content here...
  [/two-thirds-first]
  [one-third class="centered-column"]
    Your image here...
  [/one-third]
[/columns-container]

Next you will need to add the following CSS to your themes stylesheet. Understanding what is going on here is a bit complex in this forum, but here are some links were you can readup on this method.

Centering the Unknown: https://css-tricks.com/centering-in-the-unknown/
Full height with floated elements: https://stackoverflow.com/questions/15817019/how-to-float-an-element-left-with-full-height-of-the-wrapper

@media only screen and (min-width: 800px) {
  .centered-container {
    clear: both;
    overflow: hidden;
    position: relative;
  }

  .centered-column {
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .centered-column::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  // You might neeed to change to this to ".centered-column p" since your image is wrapped in a <p> tag
  .centered-column img {
    display: inline-block;
    vertical-align: middle;
  }
}

Now all of the CSS is wrapped in a media query so you will see that this is only applied when the screen width is greater that 800px. Adjust this as you see fit.

I hope this points you in the right direction. Since this question was not a support issue with the functionality of the columns themselves, I am going to close this topic, but let me know if you have further questions and I will do my best to help.

Nick

• This reply was modified 8 years, 5 months ago by Nick Diego.