How to vertically center my website title?

Question

I am trying to vertically center the title and branding of my website for tablet and smartphone mode : https://odetomytravels.com/

I would like to just add CSS code to the website theme section "aditionnal CSS".

Thank you !

site-title site-branding {
vertical-align: middle !important;
}

Curently the title and branding are sticked to the top of the page in tablet and smartphone mode.

Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Tom Rudge, Oct 06 '19 at 15:58

score 1 · Accepted Answer · answered Oct 06 '19 at 13:51

3 things:

You did not close the media query correctly.
You did not query the class correctly.

See revised properties of the div class. I highlighted it in red.

        @media only screen and (max-width: 1024px)
        {

        .mobile-header .mobile-site-header {
            background-image: url(https://odetomytravels.com/wp-content/uploads/2019/10/Header-2_1.gif);
            background-size: cover !important;
            background-position: center;
        } 

        .site-branding {
            border:5px solid red;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }
        }

Thank you, I removed the fixed position and edited the translation ! Works fine now :) — Sanjukta, Oct 06 '19 at 14:17

score 0 · Answer 2 · answered Oct 06 '19 at 13:43

0

First you need to set the display property of that element or make sure it is set to something you can use.

Your rule vertical-align requires an inline or table block.

Then understand that centering vertically requires that the element's height is defined. If you can set the height of the element then it is pretty easy. This would try to align anything inside it.

site-title site-branding {
    display:inline;
    height:400px;
    vertical-align: middle;
}

answered Oct 06 '19 at 13:43

Ususipse

303
1
9

Thank you but it does not do what I want :) – Sanjukta Oct 06 '19 at 14:16
Yes I did not look at your site and fix the problem. I tried to help you understand how to fix your problem. – Ususipse Oct 06 '19 at 14:17

How to vertically center my website title?

2 Answers2