我有三个元素编码类似.infobtnlg, .twitter, .infobtnsm。元素不会在div内居中

第一.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; 
}

来源

2015-08-28 LKPatricia

你可以在这里看到实时版本：[链接]（http://may.lynnpatricia.com） – LKPatricia

如果你想知道为什么这个问题有这么多的意见，这是因为它正在meta - http：// meta .stackoverflow.com /问题/ 303724 /应-I-有汉dled-this-situation-better – Joehot200

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

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

删除

来源

2015-08-28 20:55:28 AndrewMac

是的！这就是诀窍！谢谢！我从来不会抓到那个。 – LKPatricia

@LKPatricia：如果这回答你的问题，你可以接受它（V标记在左边，在答案分数下面）。 –

明白了。谢谢您的帮助。 – LKPatricia

text-align将帮助你为中心里面那些div

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

OR 文本，你可以简单地选择使用引导格列这会为你做的事情非常简单，这些内容将充分回应

//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>

来源

2015-12-11 08:43:40

元素不会在div内居中

DEMO PLAYGROUND

HTML

CSS

回答

相关问题