元素不会在 div 内居中

Question

我有三个编码相似的元素 .infobtnlg, .twitter, .infobtnsm。

第一个 .infobtnlg 在 div .section1 中很好地居中，正如我想要的那样，第二个 .twitter 和第三个 .infobtnsm 不是以各自的部分为中心。宽度已设置，left/right 边距为 auto。我添加了 text-align: center; 以备不时之需。

我错过了什么？

DEMO PLAYGROUND

HTML

<div class="trisection">
    <div class="section1">
        <button type="button" class="infobtnlg">The May Difference</button>
        <button type="button" class="infobtnlg">Parent Reflections</button>
        <button type="button" class="infobtnlg">Make a Gift</button>
    </div>   

    <div class="section2">
        <div class="twitter">
            <img src="/images/twitter-bl.png" alt="twitter"/>Announcements
            <hr>
        </div> 
    </div>
    <div class="section3">
        <button type="button" class="infobtnsm" style="background-color: #003b76;">In the News</button>
        <button type="button" class="infobtnsm" style="background-color: #5a9331;">The May Way</button>
        <button type="button" class="infobtnsm" style="background-color: #ff0000;">Meet Our Teachers</button>
        <button type="button" class="infobtnsm" style="background-color: #ffcc00;">Friends of May</button>
        <button type="button" class="infobtnsm" style="background-color: #fb8d20;">The May Center</button>
    </div> 
</div>

CSS

.section1, .section2, .section3 {
    width: 90%;
    margin: 0px auto;
    height: 255px;
    text-align: center;
}

.infobtnlg, .twitter, .infobtnsm {
    display: block;
    width: 93%;
    margin: 6px auto;
    border-radius: 10px;
}

.infobtnlg {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    font-size: 1.5em;
    background-color: #5a9332;
    height: 77px;
    text-shadow: -1px -1px 1px #3c3c3c;
    box-shadow: -2px 2px 1px #3c3c3c;   
}

.twitter {
    height: 240px;
    background-color: #fff;
    background-image: url("/images/twfeed.png");
    background-size: contain;
    color: #5a9332;
    font-size: 18px;
    vertical-align: middle;
    font-weight: bold;
    border: solid 1px #e2dce0;

}

.infobtnsm{
    font-family: Scala, Myriadbold, sans-serif;
    font-size: 18px;
    text-align: center;
    height: 40px;
    margin-bottom: 5px;
}

Answer 1

将 float: none; 添加到 .twitter 和 .infobtnsm 或从

中删除 float: left;

.vista .ie8 .infobtnlg, .twitter, .infobtnsm {
    float: left;
    width: 30%;
}

Answer 2

text-align 将帮助您将 div

中的文本居中

//to center contents inside div you shoul use:
#div {
    margin:auto;
}

或您可以简单地选择使用 bootstrap div 列，这将使您的所有事情变得非常容易这些内容将完全响应

//html
<div class="container">
   <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 section1">
             //section1 contents
         </div>
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 twitter">
             //twitter contents
         </div>
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 infobtnsm">
             //infobtnsm contents
         </div>
      </div>
   </div>
</div>

元素不会在 div 内居中

elements will not center within a div

html

css

centering

DEMO PLAYGROUND

HTML

CSS