CSS将内容集中在div内[英] CSS center content inside div

本文是小编为大家收集整理的关于CSS将内容集中在div内的处理方法,想解了CSS将内容集中在div内的问题怎么解决?CSS将内容集中在div内问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我需要将HTML内容集中在DIV class="合作伙伴"(带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;
}

推荐答案

要居中,将其宽度设置为一定值并添加保证金:auto.

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

编辑,您想将Div内容的居中,而不是DIV本身.您需要将h2,ul和li的显示属性更改为inline,然后删除float: left.

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

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

其他推荐答案

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

  1. 将其宽度设置为一定值并添加保证金:0自动.

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


  1. 分为3列布局

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


  1. 使用Bootstrap布局

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

其他推荐答案

您只需要

.parent-div { text-align: center }

本文地址:https://www.itbaoku.cn/post/570156.html