div中的CSS中心内容

Question

我需要将html内容集中在div class ="partners"(带有2个图像的顶部div)中.正如您从下图所示(它漂浮在左侧而不是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;
}

Answer 1

要使div居中,请将其宽度设置为某个值并添加margin: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属性进行对齐,这是您想要的.

Answer 2

有许多方法可以将任何元素集中在一起.我列出了一些

1. 将其宽度设置为某个值并添加边距:0 auto.

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

2. 分为3列布局

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

3. 使用引导程序布局

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

Answer 3

您只需要

.parent-div { text-align: center }

Answer 4

尝试使用 flexbox。例如，以下代码显示了容器 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;
}

Answer 5

在父 div 中

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

Answer 6

您只需对父 div 进行 CSS 更改

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