CSS центр содержимого внутри div

Question

Мне нужно центрировать html контент внутри div class = "partners" (верхний div с 2 изображениями). Как видно из изображения ниже (оно плавает влево вместо центра 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;
}

Answer 1

Чтобы центрировать div, установите для его ширины какое-то значение и добавьте поле: 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

Есть много способов центрировать любой элемент.Я перечислил некоторые

1. Установите ширину в какое-то значение и добавьте поле: 0 авто.

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

   ---

2. Разделить на 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

Попробуйте использовать 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;

}

Answer 5

Проблема в том, что вы присвоили фиксированную ширину вашему .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 6

сделать так:

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