Как центрировать <div>, не затрагивая содержимое внутри?

0

Я пытаюсь сделать это <div> я должен сосредоточиться на странице, но когда я использую align=center, некоторые из содержимого внутри div также выполняются. Есть ли способ предотвратить это?

Теги:
alignment

3 ответа

6
Лучший ответ

Вы можете использовать CSS (у div также должна быть указана ширина, см. Комментарий @j08691):

div { margin: 0 auto; }

div следует изменить на более конкретный селектор, например идентификатор вашего контейнера (# обозначает идентификатор) или класс (. обозначает класс).

Пример:

#myDivID {}
.myDivClass {}

Причина этого заключается в том, что механизм рендеринга всегда пытается оптимизировать и балансировать размер любых компонентов, указанных как auto. Здесь margin: 0 auto - это короткое замыкание:

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Здесь браузер не применяет никаких полей в верхней и нижней div, но когда он видит, что и левое, и правое поля установлено в auto, оно пытается (и преуспевает), чтобы сделать их равными друг другу путем разделения оставшееся пространство. Это приводит к тому, что div помещается в центр страницы.

Поделиться
  • 0
    хорошо, но можете ли вы объяснить, как это работает, чтобы я понял, почему это способ сделать это?
  • 0
    Просто хочу подчеркнуть в OP, что вам, вероятно, нужен более явный селектор, такой как #container если вы не хотите центрировать все элементы DIV
Показать ещё 7 комментариев
0

используя чистый css:

#content {
  width: 10% ;
  margin-left: auto ;
  margin-right: auto ;
  left: 45%;
  top : 50%;
}

или

div { margin: 0 auto; }

Будет ли это приемлемо?

Поделиться
0

См. Это, это должно исправить вашу проблему

HTML

<div id="outer">'
    dsadkjahdkjasgud
    dbsudbasjdhbasjkdh<br />
    dbsudbasjdhbasjkdh<br />
    <div id="innerCenter">
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />
        dbsudbasjdhbasjkdh<br />dbsudbasjdhbasjkdh<br />
    </div>
</div>

CSS

#outer{
        width : 500px;
     background-color:green;

}

#innerCenter{ 
    margin:0 auto;
    width : 50%;
     background-color:red;
}

** Примечание: вы можете изменить ширину в соответствии с вашим расположением

Сценарий: http://jsfiddle.net/aasthatuteja/zKstw/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню