Question

我需要将html内容集中在div class =＆＃34;合作伙伴＆＃34; （顶部div有2张图片）。正如您从下图中看到的那样（它漂浮在左侧而不是div的中心）：

enter image description here

这是我的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>

图像： enter image description here

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

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

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

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

Answer 3

你只需要

.parent-div { text-align: center }

Answer 4

问题是您为.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; }

Answer 5

尝试使用flexbox。作为示例，以下代码显示容器div的CSS，其中内容需要居中对齐：

.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;

}

Answer 6

这样做：

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

Answer 7

您只需为父div进行CSS更改

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

div中的CSS中心内容

7 个答案: