在父級Div中橫向居中2個Div按鈕

Question

使用DIV創建2個導航按鈕，嘗試在響應式布局中將父DIV置於中心內。 父DIV的寬度是響應的，但按鈕的寬度是固定的。 兩個按鈕應該在父級中心彼此相鄰，兩側都有均勻的空間。

看了幾個關於此的帖子，嘗試了所有解決方案，包括添加： margin:0px auto; - 並嘗試添加兩個： margin-left: auto; margin-right: auto margin-left: auto; margin-right: auto - 兩種選擇都沒有效果。

不知道一些按鈕樣式的CSS代碼是否存在問題，導致它無法居中，或者我錯過了其他內容。

這是代碼：

 #head-map { clear: none; float: left; margin-left: 30%; width: 100%; display: block; margin-right: 1%; text-align: center; padding-top: 0px; } #map-button { height: 35px; width: 70px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-align: center; padding-top: 7px; box-shadow: 0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; float: left; display: inline-block; margin: 0px auto; } #espanol-button { height: 35px; width: 100px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-align: center; padding-top: 7px; box-shadow: 0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; float: left; display: inline-block; margin: 0px auto; } a.whitelink { color: white; } a.whitelink:hover { color: #00133e; text-decoration: none; } 

 <div id="head-map"> <div id="map-button"><a class="whitelink" href="#" target="new">Map</a> </div> <div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a> </div> </div> 

Answer 1

使內部div display: inline-block並將它們與text-align: center放在父級text-align: center 。 移除浮子。

簡化示例

請注意每個內部div在標記之間沒有空格。 這可以防止在內聯元素之間顯示額外的空格。

 div { text-align: center; } div > div { display: inline-block; width: 100px; background: #F00; margin: 10px; } 

 <div id="head-map"> <div id="map-button"><a class="whitelink" href="#" target="new">Map</a> </div><div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a> </div> </div> 

Answer 2

那是因為你正在使用float: left; 並導致text-align: center; 不會工作。 移除浮子。 例：

 #head-map { clear: none; width: 100%; display: block; margin-right: 1%; text-align: center; padding-top: 0px; } #map-button { height: 35px; width: 70px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius:15px; -webkit-border-radius:15px; text-align: center; padding-top: 7px; box-shadow:0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; display: inline-block; margin:0 10px; } #espanol-button { height: 35px; width: 100px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius:15px; -webkit-border-radius:15px; text-align: center; padding-top: 7px; box-shadow:0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; display: inline-block; margin:0 10px; } a.whitelink { color: white; } a.whitelink:hover { color: #00133e; text-decoration: none; } 

  <div id="head-map"> <div id="map-button"><a class="whitelink" href="#" target="new">Map</a> </div> <div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a> </div> </div> 

Answer 3

你需要在兩個按鈕周圍添加一個包裝器 div以及一個明確的div。

http://codepen.io/anon/pen/mJKagE

<div id="head-map">
  <div class="wrapper">
    <div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
    </div>
    <div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
    </div>
    <div class="clear"></div>
  </div>
  </div>

這是CSS。 注意.clear類。

#head-map {
    clear: none;
    float: left;
    margin-left: 30%;
    width: 100%;
    display: block;
    margin-right: 1%;
    text-align: center;
    padding-top: 0px;
  background:blue;
}
.wrapper {
  width:182px;
  margin:0 auto;
}
#map-button {
    height: 35px;
    width: 70px;
    background-color: #12A483;
    border-color: #9dacc8;
     border-style: solid;
     border-width: 3px;
     border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
     text-align: center;
    padding-top: 7px;
    box-shadow:0px 2px 7px #292929;
      -moz-box-shadow: 0px 3px 8px #292929;
      -webkit-box-shadow: 0px 3px 8px #292929;
    float:left;
    display: inline-block;
    margin:0px auto;
}
.clear{clear:both}
#espanol-button {
    height: 35px;
    width: 100px;
    background-color: #12A483;
    border-color: #9dacc8;
     border-style: solid;
     border-width: 3px;
     border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
        text-align: center;
    padding-top: 7px;
    box-shadow:0px 2px 7px #292929;
      -moz-box-shadow: 0px 3px 8px #292929;
      -webkit-box-shadow: 0px 3px 8px #292929;
    float:left;  
    display: inline-block;
    margin:0px auto;
}

a.whitelink {
    color: white;   
}

a.whitelink:hover {
    color: #00133e;
    text-decoration: none;
}

Answer 4

當然， flex-box可以做到這一點

 #head-map { padding-top: 0px; display: flex; justify-content: space-around; } #map-button { height: 35px; width: 70px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-align: center; padding-top: 7px; box-shadow: 0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; } #espanol-button { height: 35px; width: 100px; background-color: #12A483; border-color: #9dacc8; border-style: solid; border-width: 3px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-align: center; padding-top: 7px; box-shadow: 0px 2px 7px #292929; -moz-box-shadow: 0px 3px 8px #292929; -webkit-box-shadow: 0px 3px 8px #292929; } a.whitelink { color: white; } a.whitelink:hover { color: #00133e; text-decoration: none; } 

 <div id="head-map"> <div id="map-button"><a class="whitelink" href="#" target="new">Map</a> </div> <div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a> </div> </div> 

上面的示例將按鈕分隔在整個頁面上。

這個FIDDLE顯示它們居中，並添加了一些輕微的左/右邊距。