CSS центрируя [закрытые] приемы

На win10 я ждал около 5-6 минут, но это зависит от количества установленных пакетов Python и вашего интернет-соединения. Также вы можете установить его через Anaconda Navigator

12
задан Commercial Suicide 21 September 2017 в 21:07
поделиться

9 ответов

Палка с Полем: 0 автоматических; для выравнивания по горизонтали; Если Вам нужно выравнивание по вертикали, также используют положение: абсолютный;наверх: 50%; граничная вершина: - (ширина/2) пкс; знайте, хотя, Если Ваш контейнер имеет больше ширины, чем Ваш экран, часть его упадет с экрана на левой стороне с помощью Положения: абсолютный метод.

6
ответ дан 2 December 2019 в 05:56
поделиться
div #centered{
 margin: 0 auto;
}

кажется, является самым надежным на основе моего опыта.

12
ответ дан 2 December 2019 в 05:56
поделиться

просто примечание, что margin:auto; метод только работает, если браузер может вычислить ширину объекта, который будет центрироваться и ширина родительского контейнера. во многих случаях установка width:auto; работы, но в некоторых это не делает.

1
ответ дан 2 December 2019 в 05:56
поделиться

Margin:auto работает во всех браузерах, пока Вы удостоверяетесь, что IE находится в режиме стандартов.

Это более придирчиво, чем другие и требует, чтобы Ваш doctype был самым первым в Вашем документе, что не означает пробела (пространство, вкладки или переводы строки) перед ним.

Если Вы делаете это, margin:auto является способом пойти!:)

3
ответ дан 2 December 2019 в 05:56
поделиться

Хорошо это походит на крупное излишество, должен сказать я. Я склонен устанавливать контейнер на text-align:center; для старых браузеров, margin:auto; для современных браузеров и отпуска это как этот. Затем текст сброса - выравнивается в элементе (если он содержит текст).

Конечно, некоторые вещи нуждаются в установке как в блоке, и ширинам нужна установка... Но что же, спрашивается, Вы пытаетесь разработать, которому нужно так много бездельничание?

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>
5
ответ дан 2 December 2019 в 05:56
поделиться

Абсолютное расположение с 50%-м подходом имеет серьезный побочный эффект, что, если окно браузера является более узким затем элемент затем, часть содержания появится от левой стороны браузера - без способа прокрутить к нему.

Придерживайтесь автоматических полей - они намного более надежны.

Если Вы работаете в режиме Standards (которым необходимо быть), затем, они поддерживаются во всех браузерах, о которых Вы, вероятно, будете заботиться.

Можно использовать текст - выравнивают взлом, если действительно необходимо поддерживать Internet Explorer 5.5 и ранее.

1
ответ дан 2 December 2019 в 05:56
поделиться

Это - удобная закладка для приемов CSS

http://css-discuss.incutio.com/

Содержит партииизцентрированиеприемы также.

1
ответ дан 2 December 2019 в 05:56
поделиться
body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Это работает приятно во всех обычных браузерах. Как уже упомянуто margin: 0 auto; не будет работать во всех полутекущих версиях IE.

-1
ответ дан 2 December 2019 в 05:56
поделиться

Попробуйте это; не знайте, работает ли это в IE, хорошо работает в Fx все же. Это центрирует блок DIV на странице с помощью CSS только (никакой JavaScript), нет гранично-автоматический, и текст в блоке DIV все еще выравнивается по левому краю. Я просто пытаюсь узнать, могло ли вертикальное центрирование проложить себе путь также, но до сих пор без успеха.

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html> 
-2
ответ дан 2 December 2019 в 05:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: