div内的CSS居中内容

scyqe7ek  于 2023-01-03  发布在  其他
关注(0)|答案(9)|浏览(385)

我需要在一个div class ="partners"(顶部有2个图像的div)中居中html内容。正如你从下面的图像中看到的(它浮动在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;
}
k0pti3hp

k0pti3hp1#

要使div居中,请将其宽度设置为某个值并添加边距:自动。

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

编辑,你想让div内容居中,而不是div本身。你需要把h2ulli的显示属性改为inline,并删除float: left

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

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

olqngx59

olqngx592#

有很多方法可以使元素居中。我列出了一些
1.将其宽度设置为某个值并添加边距:0自动。

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

1.分为3列布局

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

1.使用引导布局

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

6vl6ewon3#

你只需要

.parent-div { text-align: center }
368yc8dk

368yc8dk4#

试着使用flexbox。作为一个例子,下面的代码显示了容器div的CSS,其中的内容需要居中对齐:
根据弹性框的轴,您需要对齐或调整项目,请在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;
}
0lvr5msh

0lvr5msh5#

在父分区中

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

jgzswidk6#

您只需对父div进行CSS更改

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

bgibtngc7#

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

4bbkushb8#

这样做:

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

34gzjxbg9#

2022年以后。这是你的类中心内容都垂直和水平。

.center {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}

相关问题