Блок html по центру: Как выровнять слой по центру веб-страницы?

Выравнивание строчно-блочных элементов | Трепачёв Дмитрий

Строчно-блочные элементы выравниваются так же, как и строчные — с помощью text-align в нужном значении, заданном для родителя.

Центрирование элементов

Для примера давайте поставим строчно-блочные элементы по центру:

<div> <span>text</span> <span>text</span> <span>text</span> </div>.parent { text-align: center; padding: 10px 0; border: 1px solid red; } .child { display: inline-block; padding: 10px 20px; border: 1px solid green; }

:

Выравнивание по правому краю

Выровняем элемент по правому краю:

<div> <span>text</span> </div>. parent { text-align: right; padding: 10px 0; border: 1px solid red; } .child { display: inline-block; padding: 10px 20px; border: 1px solid green; }

:

Практические задачи

Даны дивы внутри некоторого родителя:

<div> <div>text 1</div> <div>text 2</div> <div>text 3</div> </div>.parent { padding: 10px 0; border: 1px solid red; } .child { padding: 10px; border: 1px solid green; }

Преобразуйте дивы-потомки в строчно-блочные элементы, задайте им горизонтальный margin в 5px, а затем отцентрируйте их по горизонтали относительно своего родителя.

Дан див внутри некоторого родителя:

<div> <div>text</div> </div>

. parent { padding: 10px 0; border: 1px solid red; } .child { padding: 10px; border: 1px solid green; }

Преобразуйте див-потомок в строчно-блочный элемент, затем выровняйте его по правому краю родителя.

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

Модифицируйте предыдущую задачу так, чтобы див не прижимался плотно к правому краю. Для этого элементу-потомку поставьте правый margin.

Дана ссылка внутри некоторого родителя:

<div> <a href="">text</a> </div>.parent { padding: 10px 0; border: 1px solid red; } .child { width: 100px; padding: 10px; border: 1px solid green; }

Преобразуйте ссылку в строчно-блочный элемент, затем выровняйте его по правому краю родителя.

Модифицируйте предыдущую задачу так, чтобы текст внутри ссылки выл выровнен по центру этой ссылки.

html — Как центрировать — display:block/inline-block

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

Изменено 6 месяцев назад

Просмотрено 136 тысяч раз

При центрировании элементов в html и css я нахожу два подхода: либо применение к элементу:

 display:block;
поле:0 авто;
 

или используя:

 display:inline-block;
выравнивание текста: по центру; (на родительском элементе)
 

Мне всегда интересно, что лучше и почему. Спасибо!!

• HTML
• Блок
• Центр
• CSS

0

Блочные элементы всегда должны центрироваться с помощью

 . block {
    поле слева: авто;
    поле справа: авто;
    ширина: 600 пикселей;
}
 

, как указано w3c: http://www.w3.org/Style/Examples/007/center.en.html#block

 выравнивание текста: по центру;
 

удачное название: используйте его для центрирования текста.

Обновление

Вы также можете использовать дисплей : flex сейчас:

 .parent {
    дисплей: гибкий;
    выравнивание содержимого: по центру;
}
.блокировать {
    ширина: 200 пикселей;
}
 

2

Это классический и важный вопрос.

Элементы могут быть либо встроенными (это означает, что все они располагаются рядом друг с другом — как тег span), либо они могут быть блочными (что означает наложение стека друг на друга — как тег div).

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

Для всего, что является display: inline (например, тегом span) — только способ центрирования, если вы укажете text-align: center на родительском элементе. Это будет центрировать все display: inline внутри него, что position: static;

Отображение: встроенный блок представляет собой гибрид двух относительно новых (но поддерживается еще в ie7, если вы используете хак, упомянутый в другом ответе). С помощью встроенного блока вы получаете преимущества встроенного в том, что вы можете разместить кучу элементов рядом друг с другом и сделать их центрированными (подумайте о навигации, где все элементы навигации центрированы), но ТАКЖЕ каждый item использует преимущества некоторых вещей, которые вы получаете с display: block — наиболее важной из них является HEIGHT.

Представьте себе сценарий, в котором каждый элемент навигации имеет фоновое изображение высотой 80 пикселей — вы не можете сделать встроенный элемент высотой 80 — поэтому вам нужно сделать так, чтобы каждый элемент отображал: блок — только тогда вы можете дать это высота. Таким образом, чтобы они все отображались рядом друг с другом, вы должны их плавать. Проблема в том, что если вы их плаваете, вы не можете расположить их все по центру страницы, если вы не зададите фиксированную ширину для навигации и полей: auto THAT. Это означает, что навигация имеет фиксированную ширину — может быть, это нормально, но бывают случаи, когда навигация должна иметь динамические элементы, разную ширину для разных языков и т. д.

Введите дисплей: встроенный блок.

1

В этой ситуации лучше не придумаешь оба подхода сработают и оба исправятся. Только одно display:inline-block не работает в IE7 (если вы поддерживаете этот браузер) вам понадобится хак, чтобы заставить его работать

 display: inline-block;
* дисплей: встроенный;
масштаб: 1;
 

0

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

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

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

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

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

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

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

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

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

html — Как вы можете центрировать элементы блока?

спросил 7 лет, 4 месяца назад

Изменено 7 лет, 4 месяца назад

Просмотрено 604 раза

У меня есть веб-сайт с элементами , которые я хотел бы разместить по центру страницы: (они отображаются в виде встроенного блока)

См.

скриншот ниже

РЕДАКТИРОВАТЬ: Вот код вопроса:

HTML-код:

 
    <голова>
        
    
    <тело>
        
        <дел>
            <навигация>
                

Главная Скоро! Скоро! Справка