[FIXED] How to center page title within banner image?

Issue

I have a website comprised of pages with large banner images. By default, the template places the page titles within these banners, but leaves the title uncentered vertically. To remedy this, I used a translateY tweak to center each vertically within its respective banner. Here is the code below:

HTML IDs: #page-title, #page-description

#page-title, #page-description { transform: translateY(...px); }

This works as expected. However, it seems each title requires a different px value to center it. In addition, this solution has varying effects depending upon screen size; 60px has a much lesser effect on desktop than on mobile, and so on. This creates some design inconsistencies on portable devices. Therefore, doing things this way seems sub-optimal.

Is there a more universal solution I could apply to center these titles vertically, that won't require tuning for every display size? I moved away from using padding, and "vertical-align: middle" doesn't seem to work.

My site: www.tylercharboneauprofessional.com

Solution

You could use percentage values for the transform translate like so:

transform: translateY(50%);

Or you could use display:flex to center horizontally and vertically by using:

#page-title, #page-description { 
  display: flex;
  align-items: center;
  justify-content: center;
}

Sidenote for both: Your container for your title does require to have the full height of the banner, else the center of the box will not be properly set. After that you might need to compensate for the height of your navigation to make the visible part look centered by margin-top:45px; for example.

In general you will have to do some slight edits to not only the #page-title but also to the #banner-area. The way the current banner is buildup could really be revisited in how everything fits together to be honest.

Feel free to ask if you have further questions!

Answered By - Rafaël De Jongh

Answer Checked By - Marie Seifert (PHPFixing Admin)