Center a label vertically inside a div

Question

I am trying to do something I think is pretty easy but clearly making a pigs ears of it. Here is my fiddle

I have a button and a label on display. I want to centre the label in the middle of the div, so horizontally and vertically centred.

I can centre it horizontally but not vertically. So I have tried a few things but nothing seems to centre the label vertically, even the vertical-align I use below. Not really sure why though?

.headerLbl {
   text-align: center;
   font-weight: bold;
   color: white;
   font-size: 14pt; 
   display: block;
   vertical-align: central;
}

use padding-top: 50px for it. Adjust 50 to what every number you require. — yogihosting, Aug 06 '18 at 10:41
Add `display: flex; align-items: center;` to the `.menu` class in CSS. — David, Aug 06 '18 at 10:42
You can also add `justify-content: center` for horizontally centering. — David, Aug 06 '18 at 11:01
ah I see but that then centres the button, i want the button to remain on the left — mHelpMe, Aug 06 '18 at 11:02

Charu Maheshwari · Accepted Answer · 2018-08-06T11:48:19.450

1

You need to add following styles into your code:

.menu {  
  background-color: #9FACEC;    /* Medium blue */
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display:flex;
  justify-content: center;
}

.headerLbl {
   align-self: center;
   width: 90%;
   text-align: center;
}

edited Aug 06 '18 at 11:48

answered Aug 06 '18 at 10:43

Charu Maheshwari

1,583
1
8
9

it centres it vertically but now not horizontally? – mHelpMe Aug 06 '18 at 10:53
1

Updated the code, please check now – Charu Maheshwari Aug 06 '18 at 11:03
thanks, it now centres the label both vertically and horizontally but the button is now also centred, i want the button to remain on the left hand side – mHelpMe Aug 06 '18 at 11:07
Please see above updates. – Charu Maheshwari Aug 06 '18 at 11:48
thanks, are you able to copy the link to your fiddle? I can't see the changes in the image you posted, cheers – mHelpMe Aug 06 '18 at 12:38
sorry ignore my previous comment, now working thanks – mHelpMe Aug 06 '18 at 12:40

Center a label vertically inside a div

1 Answers1