1

I'm trying to get everything in my header to get centered in the header table, but I can't figure out how. I managed to get it centered vertically but I can't figure out how to get it centered horizontally. Can you please tell me how to do it? https://fiddle.jshell.net/rgfxs94L/2/

<div id="header">
  <div class="center">
    <div class="header_cells">
      <img onclick="get_page('?page=home');" title="logo" id="logo" src="http://www.rajohan.no/img/logo_small.png">
    </div>
    <div id="main_buttons" class="header_cells">
      <div id="home" class="header_cells">
        &lt;Home&gt;
      </div>
      <div id="cv" class="header_cells">
        &lt;CV&gt;
      </div>
      <div id="nyheter" class="header_cells">
        &lt;Nyheter&gt;
      </div>
      <div id="movie" class="header_cells">
        &lt;Film&gt;
      </div>
      <div id="games" class="header_cells">
        &lt;Spill&gt;
      </div>
      <div id="music" class="header_cells">
        &lt;Musikk&gt;
      </div>
    </div>
    <div class="header_cells">
      <form id="search_form">
        <input type="search" id="search_box" placeholder="S&oslash;k...">
      </form>
    </div>
  </div>
</div>

#header {
  border-top: 3px solid #e87f29;
  background-color: #f8f8f8;
  min-width: 100%;
  min-height: 100%;
  position: static;
  border-bottom: 1px solid #e8e8e8;
  display: table;
}

.center {
  text-align: center;
}

.header_cells {
   display: table-cell;
   min-height: 100%;
   min-width: 100%;
   vertical-align: middle;
}

#logo {
  width: auto;
  max-height: 40%;
}
achref
  • 1,150
  • 1
  • 12
  • 28

1 Answers1

0

Use inline-block instead:

https://fiddle.jshell.net/o4u8per4/

.header_cells {
   display:inline-block;
   vertical-align: middle;
}
Alex
  • 2,651
  • 2
  • 25
  • 45