Vertically centering an element with CSS

Question

I am trying to vertically center content in my div.

HTML:

<div id="header">
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
    </div>

CSS:

    @media only screen and (min-width: 768px) {
        .col-sm-1 {width: 8.33%; float: left;}
        .col-sm-2 {width: 16.66%; float: left;}
        .col-sm-3 {width: 25%; float: left;}
        .col-sm-4 {width: 33.33%; float: left;}
        .col-sm-5 {width: 41.66%; float: left;}
        .col-sm-6 {width: 50%; float: left;}
        .col-sm-7 {width: 58.33%; float: left;}
        .col-sm-8 {width: 66.66%; float: left;}
        .col-sm-9 {width: 75%; float: left;}
        .col-sm-10 {width: 83.33%; float: left;}
        .col-sm-11 {width: 91.66%; float: left;}
        .col-sm-12 {width: 100%; float: left;}


    }

* {
    color: #2c2c2c;
    height: 100%;
    width: 100%;
    margin: 0 !important;
    font-family: 'Raleway';
}

#header {
    height: 10%;
    background-color: #2c2c2c;
    color: #c4c3c3;
    font-family: 'title';   
}

#logo-img {
    height: 80%;
    width: auto;

}

#logo-img-div {

}


#logo-text {
    color: #c4c3c3;

}

I want to center content of logo-img-div and logo-text, but keep those two divs on the left of header content. I've found many similar questions but none of the solutions worked.

Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Imam Assidiqqi, Nov 27 '16 at 23:05

score 0 · Answer 1 · answered Nov 27 '16 at 23:18

You are applying properties to all selectors with *. http://www.w3schools.com/cssref/css_selectors.asp Since you have a margin of 0, you are unable to align your div elements.

Normally, you could use margin-left or right and move a number of px's or em's...

score 0 · Answer 2 · answered Nov 27 '16 at 23:32

0

Try to remove the margin for (*) elements. This does not allow you to align them since the margin is the distance between all other elements including the body itself. Or you could have a margin only for left and right:

* {
  color: #2c2c2c;
  height: 100%;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-family: 'Raleway';
}

If you are trying to vertically center your div with an id of 'header' try this:

#header{
  position: relative;
  top: 40%;
  height:10%
  background-color: #2c2c2c;
  color: #c4c3c3;
  font-family: 'title'; 
}

Try to find the height of you elements in % so you can subtract them from the 50% measurement. This makes it so that your element will be perfectly centered. In this case 50% will convert to 10% since the height is set to 10%.

answered Nov 27 '16 at 23:32

Marcos Aleman

23
4

Make the header top:50% since you put the height as 10%. – Marcos Aleman Nov 27 '16 at 23:34
Ignore that comment i wrote it wrong - top:40% is the real one – Marcos Aleman Nov 27 '16 at 23:36
Thank you! It works if i put this in logo-div-img (not in header). But it doesn't work for the logo-text div (for neither: logo-div-img and header). Is there anything specific about text divs? Like line-height or something? – user3597446 Nov 28 '16 at 11:57

score 0 · Answer 3 · answered Nov 28 '16 at 00:16

Use flex to align child items. Oh, and you probably don’t want to set height and width to 100% on everything.

@media only screen and (min-width: 768px) {
  .col-sm-1 {width: 8.33%; float: left;}
  .col-sm-2 {width: 16.66%; float: left;}
  .col-sm-3 {width: 25%; float: left;}
  .col-sm-4 {width: 33.33%; float: left;}
  .col-sm-5 {width: 41.66%; float: left;}
  .col-sm-6 {width: 50%; float: left;}
  .col-sm-7 {width: 58.33%; float: left;}
  .col-sm-8 {width: 66.66%; float: left;}
  .col-sm-9 {width: 75%; float: left;}
  .col-sm-10 {width: 83.33%; float: left;}
  .col-sm-11 {width: 91.66%; float: left;}
  .col-sm-12 {width: 100%; float: left;}
}

* {
  color: #2c2c2c;
  margin: 0;
  font-family: 'Raleway';
}

html, body {
  height: 100%;
}

#header {
  height: 10%;
  background-color: #2c2c2c;
  color: #c4c3c3;
  font-family: 'title';
  display: flex;
  align-items: center;
}

#logo-img {
  height: 80%;
  width: auto;
}

#logo-text {
  color: white;
}

<div id="header">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
</div>

Vertically centering an element with CSS

3 Answers3