Vertical centering in a div

Question

I am having a problem making my logo and links align vertically. I have tried to achieve this using inline block and vertical-align set to middle but it didn't work.

I know I can achieve this using flex box. But I don't want to use flex box. And if I must use flex, is flex box better in achieving proper alignment?

Please any help will be appreciated.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo,
ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  list-style: none;
  float: right;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Nisarg Shah, Apr 10 '18 at 03:05

Michael Benjamin · Answer 1 · 2018-04-10T03:16:30.000

3

In many browsers, the ul element comes with default top and bottom margins.

Chrome:

Those margins are throwing off the vertical centering. Just remove them.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo, ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  margin: 0; /* NEW */
  list-style: none;
  float: right;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

edited Apr 10 '18 at 03:16

answered Apr 10 '18 at 03:07

Michael Benjamin

346,931
104
581
701

1

got its. Thanks alot perfect – Friday Ameh Apr 10 '18 at 03:09

score 1 · Answer 2 · answered Apr 10 '18 at 03:13

1

In some browsers, the <ul> element has margin by default.

Try

ul {
  list-style: none;
  float: right;
  margin: 0;
}

to remove the default margins.

answered Apr 10 '18 at 03:13

Michael Elliott

307
2
15

score 1 · Answer 3 · answered Apr 10 '18 at 07:44

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}
margin:0 auto; will help you to set the ul element in vertically align.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo,
ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

parker_codes · Answer 4 · 2018-04-10T04:00:07.230

You might check out Bulma, specifically their Level attribute. This uses flexbox in the background, but you don't have to learn it- just the easy-to-use classes!

<!-- Main container -->
<nav class="level">

    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">Content</p>
        </div>

    </div>

    <!-- Right side -->
    <div class="level-right"> 
        <p class="level-item">More Content</p> 
        <p class="level-item"><a class="button is-success">New</a></p>
    </div>
</nav>

score 0 · Answer 5 · answered Apr 10 '18 at 06:27

0

margin: 0; will help you.

ul {
  list-style: none;
  float: right;
  margin: 0;
}

https://jsfiddle.net/n0o915w3/1/

answered Apr 10 '18 at 06:27

dudster

16
4

Vertical centering in a div

5 Answers5