div 内の button を centering して left と right に交互へ並べる

HTML CSS

mac-safari

f:id:mat5ukawa:20150817225809p:plain

workspace
|
|-- index.html
|-- main.css

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>titleExapmle</title>
    <meta name="description" content="pageDescription">
    <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body>
    <div id="main_layer">
      <div class="sub_layer">
        <div class="left"><button>hello</button></div>
        <div class="right"><button>world</button></div>
      </div>
      <br />
      <div class="sub_layer">
        <div class="left"><button>one</button></div>
        <div class="right"><button>two</button></div>
      </div>
      <br />
      <div class="sub_layer">
        <div class="left hide"><button>three</button></div>
        <div class="right"><button>four</button></div>
      </div>
    </div>
  </body>
</html>

main.css

div#main_layer {
  text-align: center;
  margin-top: 100px;
}

div#main_layer .sub_layer {
  margin-bottom: 100px;
}

div#main_layer .sub_layer .left.hide {
  visibility: hidden;
}

div#main_layer .sub_layer .left {
  margin-right: 100px;
}

div#main_layer .sub_layer .right {
  margin-left: 100px;
}

div#main_layer .sub_layer .left, div#main_layer .sub_layer .right {
  display: inline;
}

button {
  width: 120px;
  height: 50px;
  font-size: 16px;
}

IE に visibility: hidden は効果なし(?) ... 参照項目

stackoverflow.com