Блог

Главная - Вопросы по программированию - Центрирование содержимого div в нескольких вложенных подразделениях

Центрирование содержимого div в нескольких вложенных подразделениях

#html #css #css-position #centering #grid-layout

#HTML #css #css-позиция #центрирование #сетка-макет

Вопрос:

Я пытаюсь центрировать некоторые из них так, чтобы они отображались в центре, однако сложность заключается в том, что html находится в пределах нескольких (часть html является статической, а часть — динамической из базы данных).

Смотрите Скриншот в качестве примера того, как он выглядит в настоящее время (я хочу, чтобы это содержимое было в центре) http://postimg.org/image/5fc6ecgy7 /

примечание — сайт использует базовую сеточную систему 960. Ниже приведен HTML:

 <div class="">
<div class="">
    <div class="">
        <div id="national-prize-feed" class="panel-wrapper ">
            <div class="border">
            <div class="content clearfix add-radius">
            <div style="padding:10px 0px;">
            <div id="nation-prizes-collection" class="clearfix">
            <div class="summary"></div>
            <div class="">
                <div class="national-prizes">
                <div class="prizes">
                    <a href="ipod-shuffle"><img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png"></a>
                </div>
                </div>
                <div class="national-prizes">
                <div class="prizes">
                    <a href="football"><img class="prizes-img" alt="Football" src="/images/prizes/football.png"></a>
                </div>
                </div>
            </div>
            <div class="keys" title="/pages/index/slug/prizes" style="display:none">
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>

Мой конкретный css (есть намного больше .. он основан на макете на основе сетки)

 div.prizes {
  float: left;
}

div.prizes img {
  width: 280px;
}

.prizes-img {
  padding: 0 7px 0 7px;
  margin: 7px 5px 7px 5px;
  max-width: 100%;
  height: auto;
}

Ответ №1:

Чтобы расположить DIV в центре экрана, вам необходимо установить статическую ширину div в центре, слева: 0px, справа: 0px, а соответствующие поля автоматически.

Вот пример: http://jsfiddle.net/pR4hq /

 <style>.center{
    position: relative;
    display: block;
    width: 120px;
    background: rgb(90,90,90);
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</style>
<div class="center">Center Content</div>
Метки: