Question

我试图让我的标题中的所有内容都集中在标题表中，但我无法弄清楚如何。我设法让它垂直居中，但我无法弄清楚如何让它水平居中。你能告诉我怎么做吗？ 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%;
}

Answer 1

改为使用内联块：

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

.header_cells {
   display:inline-block;
   vertical-align: middle;
}

我无法通过标题将内容集中在其中

1 个答案: