Html div内的CSS中心内容

CSS center content inside div

提问by ShaneKm

I need to center html content inside a div class="partners" (top div with 2 images). As you can see from the image below (it floats left instead of center of the div):

我需要将 html 内容放在 div class="partners"（带有 2 个图像的顶部 div）中。如下图所示（它向左浮动而不是 div 的中心）：

This is my html code:

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

Image:

图片：

CSS:

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

回答by socha23

To center a div, set it's width to some value and add margin: auto.

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

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

EDIT, you want to center the div contents, not the div itself. You need to change display property of h2, uland lito inline, and remove the float: left.

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

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

Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.

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

回答by Gnanasekar S

There are many ways to center any element. I listed some

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

1. Set it's width to some value and add margin: 0 auto.

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

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

---

---

1. Split into 3 column layout

2. 拆分为 3 列布局

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

---

---

1. Use bootstrap layout

3. 使用引导程序布局

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

回答by Dan Alboteanu

You just need

您只需要

.parent-div { text-align: center }

回答by Mahendra Liya

Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:

尝试使用 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;

}

回答by joern

The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.

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

To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.

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

To achieve that you have to remove the floating in the content elements and set the displayproperty of the block levels elements to inline:

为此，您必须删除内容元素中的浮动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; }

回答by AzizAhmad

do like this :

这样做：

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

回答by Mahammad Shareef M

You just do CSS changes for parent div

您只需为父 div 做 CSS 更改

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