さぁ!検索しよう!

display:tableで、3つの要素をそれぞれ左端・中央・右端に配置したスマートフォンサイトのヘッダーレイアウトを作る方法です。

DEMO

HTML

<header>
  <div class="left">
    <a href="#">
      <i class="fa fa-search fa-lg"></i></a>
  </div>
  <h2><a href="#">LOGO</a></h2>
  <div class="right">
    <a href="#">
      <i class="fa fa-bars fa-lg"></i></a>
  </div>
</header>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: #eee;
  margin: 0;
}

header {
  background: #A18E5C;
  color: #fff;
  display: table;
  padding: 6px;
  text-align: center;
  width: 100%;
}

.left,
h2,
.right {
  display: table-cell;
  vertical-align: middle;
}

.left a,
.right a {
  border: 1px solid #fff;
  border-radius: 5px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  width: 44px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

ポイント

親要素にdisplay:table;と横幅を必ず指定します。

header {
  background: #A18E5C;
  color: #fff;
  display: table;
  padding: 6px;
  text-align: center;
  width: 100%;
}

子要素にdisplay:table-cell;を指定することで、横並びになります。更にvertical-align: middle;で縦方向の中央揃えをしています。

.left,
h2,
.right {
  display: table-cell;
  vertical-align: middle;
}

text-align:left,text-align:rightで、ボタンが両端に配置されます。中央のLOGOにはtext-align:centerは指定しません。

.left {
  text-align: left;
}

.right {
  text-align: right;
}

以上で、display:table-cellで3つの要素をそれぞれ左端・中央・右端に配置する方法を終わります。