元素不会在div中居中

Question

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

我希望第一个.infobtnlg在div .section1内很好地居中，第二.twitter和第三.infobtnsm不在其各自的部分中心。宽度设置，左/右边距自动。我添加了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;
}

OR 您可以简单地选择使用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>