Содержание CSS-центра внутри div

Мне нужно центрировать содержимое html внутри div class= "партнеров" (верхний div с 2 изображениями). Как вы можете видеть из изображения ниже (он плавает слева вместо центра div):

enter image description here

Это мой html-код:

<div id="partners">
    <div class="wrap clearfix">
        <h2>Partnertnerzy serwisu:</h2>
        <ul>
            <li><a href="#" onclick="location.href='http://www.dilbert.com/'; return false;"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>    
            <li><a href="#" onclick="location.href='http://www.youtube.com><img width='; return false;"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;
}

Ответы

Ответ 1

Чтобы центрировать div, установите его ширину в какое-то значение и добавьте margin: auto.

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

EDIT, вы хотите сосредоточить содержимое div, а не сам div. Вам нужно изменить свойство отображения h2, ul и li на inline и удалить float: left.

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

Затем они будут выложены как обычные текстовые элементы и выровнены в соответствии с свойством text-align своего контейнера, что вам и нужно.

Ответ 2

Существует множество способов центрировать любой элемент. Я перечислил некоторые

  • Задайте ширину для некоторого значения и добавьте margin: 0 auto.

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

Ответ 3

Вам просто нужно

.parent-div { text-align: center }

Ответ 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; }

Ответ 5

Попробуйте использовать flexbox. В качестве примера, следующий код показывает CSS для контейнера div, внутри которого содержимое должно быть выровнено по центру:

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

}

Ответ 6

выполните следующие действия:

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