【问题标题】：elements will not center within a div元素不会在 div 中居中
【发布时间】：2023-11-25 07:51:01
【问题描述】：

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

第一个 .infobtnlg 很好地居中在一个 div .section1 中，就像我希望的那样，第二个 .twitter 和第三个 .infobtnsm 不在各自的部分中居中。宽度已设置，左右边距为 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;
}

【问题讨论】：

你可以在这里看到现场版：link
如果你想知道为什么这个问题有这么多观点，那是因为它正在 meta 上讨论 - meta.*.com/questions/303724/…

标签： html css centering

【解决方案1】：

将float: none; 添加到.twitter 和.infobtnsm 或从中删除float: left;

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

【讨论】：

是的！那成功了！谢谢！我永远不会明白这一点。
@LKPatricia：如果这回答了您的问题，您可以接受（左侧的 V 标记，答案分数下方。）
知道了。感谢您的帮助。

【解决方案2】：

text-align 将帮助您在 div 中居中文本

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

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

【讨论】：