div内的CSS中心内容答案

【问题标题】：CSS center content inside divdiv内的CSS中心内容
【发布时间】：2011-12-17 02:42:42
【问题描述】：

我需要将 html 内容置于 div class="partners" 中（顶部 div 有 2 张图片）。从下图可以看出（它向左浮动，而不是 div 的中心）：

这是我的html代码：

<div id="partners">
    <div class="wrap clearfix">
        <h2>Partnertnerzy serwisu:</h2>
        <ul>
            <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>    
            <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>    
        </ul>
        <a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
    </div>
</div>

图片：

CSS：

#partners, #top {
    position: relative;
    z-index: 100;
}
#partners {
    margin: 12px 0 3px;
    text-align: center;
}
.clearfix:after, .row:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#partners .wrap {
    width: 655px;
}
.wrap {
    margin: 0 auto;
    position: relative;
    width: 990px;
}
#partners h2 {
    color: #A6A5A5;
    float: left;
    font-weight: normal;
    margin: 2px 15px 0 0;
}
#partners ul {
    float: left;
}
ul {
    list-style-position: outside;
    list-style-type: none;
}

【问题讨论】：

请修正您的 css 代码格式。代码不足以理解#partner容器的定位。 - 我会说你需要一个容器周围的包装器并指定以下中心#partner_wrapper { text-align: center; } #partner { display: inline-block; }。您可以为子元素 #partner * { text-align: left; } 重置此格式

标签： html css css-float

【解决方案1】：

要使 div 居中，请将其宽度设置为某个值并添加边距：auto。

#partners .wrap {
    width: 655px;
    margin: auto;
}

编辑，您希望 div 内容居中，而不是 div 本身。您需要将h2、ul和li的显示属性更改为inline，并删除float: left。

#partners li, ul, h2 {
    display: inline;
    float: none;
}

然后，它们将像普通文本元素一样布局，并根据容器的 text-align 属性对齐，这就是你想要的。

【讨论】：

我的错误，你想使内容居中，而不是 div 本身。我相应地更新了我的答案。

【解决方案2】：

有很多方法可以使任何元素居中。我列出了一些

将其宽度设置为某个值并添加边距：0 自动。

.partners {
    width: 80%;
    margin: 0 auto;
}

分成 3 列布局

.partners {
    width: 80%;
    margin-left: 10%;
}

使用引导布局

<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">Your Content / Image here</div>
</div>

【讨论】：

【解决方案3】：

你只需要

.parent-div { text-align: center }

【讨论】：

【解决方案4】：

尝试使用弹性盒子。例如，以下代码显示了容器 div 的 CSS，其中的内容需要居中对齐：

根据 flexbox 的轴，您将需要对齐或对齐项目，请在 MDN 阅读更多内容

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;
}

【讨论】：

如果您希望您的 html 显示在像 GMail 这样的电子邮件客户端中，则将无法正常工作

【解决方案5】：

您只需为父 div 进行 CSS 更改

.parent-div { 
        text-align: center;
        display: block;
}

【讨论】：

【解决方案6】：

问题是您为 .wrap DIV 分配了固定宽度。 DIV 本身是居中的（您可以在为其添加边框时看到），但 DIV 太宽了。换句话说，内容不会填满 DIV 的整个宽度。

要解决问题，您必须确保 .wrap DIV 的宽度与其内容一样宽。

要实现这一点，您必须删除内容元素中的浮动并将块级元素的display 属性设置为inline：

#partners .wrap {
 display: inline;
} 

.wrap { margin: 0 auto; position: relative;}

#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}

#partners ul {
display: inline;
}

#partners li {display: inline}

ul { list-style-position: outside; list-style-type: none; }

【讨论】：

此答案包括正确说明背后的解释。更多的答案应该是这样的！

【解决方案7】：

在父 div 中

parentDiv: {
     display:flex;
     height:100%;
     width:100%;
     justify-content:center;
     align-items:center;
}

【讨论】：

这很好用！

【解决方案8】：

这样做：

child{
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

【讨论】：