Выравнивание блока по горизонтали css: 5 способов горизонтального выравнивание блоков по центру

Leave a Comment / Css / By /

html — Как выровнять div по горизонтали?

.header {
  width: 100%;
  height: 100px;
  float: left;
}
div.logo {
  width: 100px;
  height: 100px;
}
/* .logo img {
  display: block;
} */
.call {
  width: 150px;
  height: 100px;
  background-color: #fff;
}
ul {
  display: inline;
}
ul li {
    margin:0;
    padding:0;
    list-style-type:none;   
    text-align:center;
}
<div>
<div>
  <img src="http://pavlova.cc/wp-content/uploads/2015/12/sobakapavlova-logo-100x100.png" alt="собака павлова">
<div>
  <ul>
    <li>8-800-000-00-00</li>
    <li>skype: <strong>dog pavlov</strong></li>
  </ul>
</div>
</div>
</div>
  • html
  • css
  • вёрстка
  • div

1

Предположу. .. :

.header {
  width: 100%;
  height: 100px;
  float: left;
  
  text-align: center;
}
div.logo {
  width: 100px;
  height: 100px;
  
  display: inline-block;
  vertical-align: middle;
}
/* .logo img {
  display: block;
} */
.call {
  width: 250px;
  background-color: #fff;
  
  display: inline-block;
  vertical-align: middle
}

ul li {
    margin:0;
    padding:0;
    list-style-type:none;   
    text-align:center;
}
<div>
<div>
  <img src="http://pavlova.cc/wp-content/uploads/2015/12/sobakapavlova-logo-100x100.png" alt="собака павлова">
</div>
<div>
  <ul>
    <li>8-800-000-00-00</li>
    <li>skype: <strong>dog pavlov</strong></li>
  </ul>

</div>
</div>

5

Варианты:

margin:0 auto;

Процентный способ:

#test {
  margin:0 25% 0 25%;
  width:50%;
}

Смешанный

#test {
  left: 50%;
  margin-left: -500px;
  position: absolute;
  width: 1000px;
}

С доп. блоком

#dop-block{
    position: relative;
    float: right;
    right: 50%;
}
#block{
    position: relative;
    float: left;
    left: 50%;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Выравнивание блока HTML (вертикально и горизонтально)

Блог / Танцы с CSS / центровка / Выравнивание блока HTML (вертикально и горизонтально)

Центровка элемента — одна из типовых задач в верстке.

Решать её можно по разному, рассмотрим некоторые способы.

Горизонтальная центровка.

С центровкой текста все ясно:

text-align: center;

text-align: center;

HTML tag center

Раньше встречалось использование тега <center>, который является валидным только в transitional doctype. Считается, что его использование аналогично действию text-align: center. Однако это не так. Им можно центрировать не только текст, но и контейнер вроде div.

Здесь я отцентрировал по горизонтали с помощью <center> контейнер с фиксированной шириной. При этом, если убрать <center> и дописать в стили <body> прилегание текста по центру, то эффекта центровки контейнера мы не получим. Обратите внимание, что на рисунке не только сам контейнер центрован, но и текст в нем также центрован.

Код примера в HTML

<html> <head> <style> #sample {     width: 200px;         background: #8F8; } </style> </head> <body>     <center>         <div>         Lorem Ipsum is simply dummy text of the printing and typesetting industry.         Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,         when an unknown printer took a galley of type and scrambled it to make a type         specimen book.         </div>     </center> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<head>

<style>

#sample {

    width: 200px;    

    background: #8F8;

}

</style>

</head>

<body>

    <center>

        <div>

        Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

        when an unknown printer took a galley of type and scrambled it to make a type

        specimen book.

        </div>

    </center>

 

</body>

</html>

Margin: auto;

Чтобы стилями добиться эффекта подобного <center>, можно добавить специфический

margin. Тогда тег <center> можно убрать.

#sample {     width: 200px;         background: #8F8;     /* center tag */     margin: 0 auto;     text-align: center; }

1

2

3

4

5

6

7

#sample {

    width: 200px;    

    background: #8F8;

    /* center tag */

    margin: 0 auto;

    text-align: center;

}

Центровка таблицей.

Кто любит табличную магию, те могут применять центровку таблицей. Результат аналогичен <center>.

Код HTML

<html> <head> <style> #sample {     width: 200px;         background: #8F8; } </style> </head> <body>     <table><tr><td align=»center»>         <div>         Lorem Ipsum is simply dummy text of the printing and typesetting industry.         Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,         when an unknown printer took a galley of type and scrambled it to make a type         specimen book.         </div>     </td></tr></table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<html>

<head>

<style>

#sample {

    width: 200px;    

    background: #8F8;

}

</style>

</head>

<body>

    <table><tr><td align=»center»>

        <div>

        Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

        when an unknown printer took a galley of type and scrambled it to make a type

        specimen book.

        </div>

    </td></tr></table>

</body>

</html>

Вертикальная центровка

Раз уж мы заговорили о настоящей табличной магии, то нет ничего сложного центровать контейнер в таблице по вертикали.

В таблице из прошлого примера добавим центровку по вертикали (valign=center»). Табличку я подкрасил, чтобы визуализировать её границы.

HTML код для табличной центровки контейнера по вертикали.

<html> <head> <style> #sample {     width: 200px;         background: #8F8; } table {     background: #88F; } </style> </head> <body>     <table><tr><td align=»center» valign=center»>         <div>         Lorem Ipsum is simply dummy text of the printing and typesetting industry.         Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,         when an unknown printer took a galley of type and scrambled it to make a type         specimen book.         </div>     </td></tr></table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<html>

<head>

<style>

#sample {

    width: 200px;    

    background: #8F8;

}

table {

    background: #88F;

}

</style>

</head>

<body>

    <table><tr><td align=»center» valign=center»>

        <div>

        Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

        when an unknown printer took a galley of type and scrambled it to make a type

        specimen book.

        </div>

    </td></tr></table>

</body>

</html>

Центровка с помощью CSS свойства vertical-align.

Vertical-align относиться к свойству прилегания строки, потому наш контейнер нужно сначала подготовить. Вместо дефолтного display: block нужно установить block-inline. Добавим внешний контейнер, который имитирует строку, где выравнивается наш тестовый блок.

Вроде бы все есть, но почему то центровки по вертикали не происходит. Чудо не случилось :). Все потому, что middle должен вычисляться относительно других элементов строки, а их нет.

HTML код примера выше.

<html> <head> <style> #line { /* контейнер имитирует строку 250 точек высотой */     background-color: #88F;     height: 250px;     line-height: 250px; } #sample { /* тестовый контейнер */     width: 150px;         background-color: #8F8;     line-height: 18px;     vertical-align: middle;     display: inline-block; } </style> </head> <body>     <div>         <div>             Lorem Ipsum is simply dummy text of the printing and typesetting industry.             Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.         </div>     </div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<html>

<head>

<style>

#line {

    /* контейнер имитирует строку 250 точек высотой */

    background-color: #88F;

    height: 250px;

    line-height: 250px;

}

#sample {

    /* тестовый контейнер */

    width: 150px;    

    background-color: #8F8;

    line-height: 18px;

    vertical-align: middle;

    display: inline-block;

}

 

</style>

</head>

<body>

    <div>

        <div>

            Lorem Ipsum is simply dummy text of the printing and typesetting industry.

            Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

        </div>

    </div>

</body>

</html>

Чтобы пример заработал достаточно добавить в #line  неразрывного пробела — &nbsp;. Это также могут быть другие inline, block-inline контейнеры, вроде #sample.

Теперь все получилось, как задумано. Контейнер #sample занял положение по центру строки.

<body>     <div>         <div>             Lorem Ipsum is simply dummy text of the printing and typesetting industry.             Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.         </div>         &nbsp;     </div> </body>

1

2

3

4

5

6

7

8

9

<body>

    <div>

        <div>

            Lorem Ipsum is simply dummy text of the printing and typesetting industry.

            Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

        </div>

        &nbsp;

    </div>

</body>

Вот такая маленькая хитрость. 🙂

центровка

Написать комментарий

Данная запись опубликована в 17.09.2015 14:47 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

 

Комментарии к «Выравнивание блока HTML (вертикально и горизонтально)»

Понравилась статья? Есть вопросы? — пишите в комментариях.

html — CSS — Как выровнять div по горизонтали?

спросил

Изменено 9 лет, 10 месяцев назад

Просмотрено 1к раз

, поэтому я получил этот список div 200 на 200, но они отображаются вертикально теперь я очень хочу, чтобы весь мой сайт был горизонтальным, как Metro UI

 тело {
    цвет фона: синий;
}
дел {
    дисплей: встроенный;
    цвет фона: черный;
    ширина: 200 пикселей;
    высота: 200 пикселей;
    поле: 10 пикселей;
    отступ: 5px;
    граница: сплошная 2 пикселя желтая;
}

если я применяю display: inline, они все уменьшаются??? почему СДЕЛАТЬ: раскомментировать display: inline; в jsfiddle css и см.

http://jsfiddle.net/uVY5V/3/

какой хороший способ разместить все горизонтальное или встроенное

  • html
  • css

Предоставление white-space: nowrap к тегу body и display: inline-block к тегу div делают свое дело.

Рабочая скрипка

2

Встроенные элементы не могут иметь заданную ширину или высоту.

Блочные элементы не могут располагаться рядом ( float обман :p)

display:inline-block — лучшее из обоих миров 😉

1

Вы можете использовать text-align: justify для div.wrapper , и вы можете использовать display:inline-block для списка div. Вот так:

HTML 

 

  <дел>
    <дел> 
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
  <дел>
  <дел>

CSS 

 корпус{
цвет фона: синий;
}
. обертка {
  межбуквенный интервал: -4px;
  интервал между словами: -4px;
  размер шрифта: 0;
  выравнивание текста: по ширине;
}
.обертка: после {
  содержание:"";
  дисплей: встроенный блок;
  ширина: 100%;
}
.обертка div{
    размер шрифта: 16px;
    межбуквенный интервал: нормальный;
    межсловный интервал: нормальный;
    дисплей: встроенный блок;
    * дисплей: встроенный;
    масштаб: 1;
    цвет фона: черный;
    ширина: 200 пикселей;
    максимальная ширина: 200 пикселей;
    высота: 200 пикселей;
    поле: 10 пикселей;
    отступ: 5px;
    граница: сплошная 2 пикселя желтая;
    -webkit-transition: максимальная ширина 500 мс при входе и выходе, высота 500 мс при входе и выходе;
    -moz-transition: max-width 500 мс встав-выход, высота 500 мс встав-выход;
    -ms-переход: макс. ширина 500 мс, плавный вход-выход, высота 500 мс, плавный вход-выход;
    -o-transition: max-width 500 мс облегчение входа-выхода, высота 500 мс облегчение входа-выхода;
    переход: максимальная ширина 500 мс, плавность входа и выхода, высота 500 мс, плавность входа и выхода;
}
. обертка .placeholder {
  ширина: 200 пикселей;
  высота: 0;
  граница: нет;
  фон:нет;
}

Пожалуйста, просмотрите демо. Если вы заинтересованы, вы можете нажать здесь и здесь.

0

Зависит от того, что именно вы хотите. Это заставит их идти горизонтально до конца ширины. JsFiddle

HTML:

 

<дел>
<дел>
<дел>
<дел>
<дел>
<дел>
<дел>

CSS:

 корпус
{
цвет фона: синий;
ширина:100%;
}
дел {
    /*отображение: встроенный;*/
    дисплей: встроенный блок;
    цвет фона: черный;
    ширина: 200 пикселей;
    высота: 200 пикселей;
    поле: 10 пикселей;
    отступ: 5px;
    граница: сплошная 2 пикселя желтая;
}

Мы использовали числа с плавающей запятой для разметки с тех пор, как оставили таблицы позади. Это причудливое решение, которое часто может вызвать проблемы, но если вы знаете, что делаете, оно работает.

Одна интересная альтернатива float, к которой в последнее время люди обращаются все чаще и чаще, — установка отображаемого значения элемента в inline-block.

 раздел{
        отображение: встроенный блок;
        цвет фона: черный;
        ширина: 200 пикселей;
        высота: 200 пикселей;
        поле: 10 пикселей;
        отступ: 5px;
        граница: сплошная 2 пикселя желтая;
    }

2

Это можно исправить несколькими способами:

  1. Изменить дисплей: встроенный; Дисплей с по : встроенный блок , как показано здесь

  2. Добавить поплавок: левый; как показано здесь

  3. Оставьте все как есть и добавьте содержимое в разделы, как показано здесь

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Выравнивание блока для блочного, абсолютного позиционирования и макета таблицы — CSS: каскадные таблицы стилей

Спецификация выравнивания блоков подробно описывает, как работает выравнивание в различных методах компоновки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте блочной компоновки, включая плавающие, позиционированные и табличные элементы. Поскольку эта страница предназначена для подробного описания вещей, специфичных для блочного макета и выравнивания блоков, ее следует читать вместе с основной страницей выравнивания блоков, на которой подробно описаны общие черты выравнивания блоков для разных методов макета.

Примечание: На момент написания (май 2018 г.) не было реальной поддержки свойств выравнивания блоков в блочной компоновке. В этом документе подробно описывается, как спецификация ожидает реализации этих свойств для полноты, и, вероятно, он изменится по мере разработки спецификации и реализации браузера.

Свойство justify-content не применяется к блочным контейнерам или ячейкам таблицы.

Свойство align-content применяется к оси блока для выравнивания содержимого поля внутри его контейнера. Если запрошен метод распределения контента, такой как интервал-между , интервал-вокруг или интервал-равномерно , тогда будет использоваться резервное выравнивание, так как контент обрабатывается как единый объект выравнивания.

свойство justify-self используется для выравнивания элемента внутри содержащего его блока на встроенной оси.

Это свойство не применяется к плавающим элементам или ячейкам таблицы.

Свойство align-self не применяется к блокам уровня блока (включая числа с плавающей запятой), так как на оси блока имеется более одного элемента. Это также не относится к ячейкам таблицы.

Абсолютно позиционированные элементы

Контейнер выравнивания представляет собой позиционированный блок, учитывающий значения смещения сверху, слева, снизу и справа. Обычное ключевое слово разрешается в stretch , если только позиционируемый элемент не является замененным элементом, в этом случае он преобразуется в start .

Поскольку в настоящее время браузер не поддерживает выравнивание блоков в блочном макете, ваши варианты выравнивания — либо использовать один из существующих методов выравнивания, либо сделать даже один элемент внутри контейнера гибким элементом, чтобы использовать свойства выравнивания, как указано в flexbox.

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

 .container {
  ширина: 20см;
  поле слева: авто;
  поле справа: авто;
}

В макете таблицы у вас есть доступ к свойству вертикального выравнивания для выравнивания содержимого ячейки внутри этой ячейки.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *