保證金：0px auto;不會中心元素

-1

我想中心我的按鈕'瀏覽器投資組合'使用margin：0px auto; 。請有人可以善意解釋爲什麼這不工作使用下面的HTML和CSS？保證金：0px auto;不會中心元素

<div class="portfolio"> 
    <div class="container"> 
     <h3>Portfolio</h3> 
     <div class="group1"> 
      <img src="http:....." style="height: 506px; width: 675px"> 

      <div class="group2"> 
       <h3>Client</h3> 
       <h4>JPMorgan</h4> 
       <h3>Role in Project</h3> 
       <h4>Project Lead</h4> 
       <h3>Project Included</h3> 
       <h4>Mobile and Web Interface</h4> 
       <a href="#">Browser</a> 
      </div> 
     </div> 
     <div class="group3"> 
      <a href="#">Browser Portfolio</a> 
     </div> 
    </div> 
</div> 

<style> 
    .portfolio .group3 { 
     font-size: 0.9em; 
     padding: 0.7em 1.5em; 
     color: #5EC7E5; 
     border-radius: 5px; 
     font-weight: 600; 
     border: 1px solid red; 
     position: relative; 
     margin: 0px auto; 
     display: inline-block; 
     width: 100%; 
    } 
</style>

來源

2015-08-15 case_2501

'.group3 {text-align：center; }' – Turnip

謝謝。該解決方案有效。但是，對於我自己的發展和學習，我不明白爲什麼。是否有使用邊距的某些先決條件：0px auto; ？ –

@mugman是的 - 顯示：塊和明確的寬度。請看我的答案。 – beercohol

要使用margin: auto使元素居中，他們必須使用display: block並且具有明確的寬度。

添加這個類你的CSS將使其工作：

.group3 a { 
    display: block; 
    width: 110px; 
    margin: 0 auto; 
}

或者您可以使用text-align: center其他答案說。

見JS小提琴這裏：http://jsfiddle.net/rbuzach0/

編輯：當你問爲什麼某些屬性沒有從含<div>您<a>繼承，這裏有一個列表（從CSS2.1規範，但這是我能找到的簡明形式）哪些屬性會繼承，哪些不會：http://www.w3.org/TR/CSS21/propidx.html

檢查「繼承？」柱。你會看到Display和Margin都不會繼承。

來源

2015-08-15 12:08:00 beercohol

謝謝beercohol。但是，將「顯示」元素從行內塊更改爲阻止在我的原始代碼，不解決問題？我已經指定了一個寬度。爲什麼是這樣？ –

不，您的原始CSS將這些屬性賦予了包含'div class =「group3」''但它們不會繼承到子元素。您需要直接將它們應用於''元素。 'inline-block'不能與'margin：auto'一起使用 – beercohol

請參閱更新後的答案，瞭解關於CSS繼承的更多信息 – beercohol

定義文本對齊的CSS：

此行

.portfolio .group3 { 
text-align: center; //Missing in your code. 
}

觀看演示here

來源

2015-08-15 12:03:29

只需添加文本對齊地址：中心您.group3元素：

.group3 { 
    text-align:center; 
}

http://jsfiddle.net/8stggrpy/

當您在已應用邊距的對象上指定了一個寬度：0 auto時，對象將居中放置在其父容器中。

來源

2015-08-15 12:05:30

謝謝。該解決方案有效。但是，對於我自己的發展和學習，我不明白爲什麼。是否有使用邊距的某些先決條件：0px auto; ？ –

謝謝DJEBALI。但是，我不明白。在我的原始代碼中，我已經指定了對象的寬度並應用邊距，因此，根據您的回答，對象將位於其父容器中央;它沒？至少在添加文本對齊屬性之前，我不明白這背後的邏輯。我已經使用margin：auto以前沒有文本對齊就好，我想知道爲什麼這個特定的情況是不同的。 –

http://stackoverflow.com/a/2392570/4908341 –

保證金：0px auto;不會中心元素

回答

相關問題