Css выравнивание по центру внутри блока: Центрирование горизонтальное и вертикальное

CSS: выравнивание элементов внутри div

У меня есть div, который содержит три элемента, и у меня возникают проблемы с правильным позиционированием последнего. Div слева должен быть слева, тот, что посередине, должен быть центрирован, а третий-справа.

Итак, у меня есть что-то вроде:

#left-element {
    margin-left: 9px;
    margin-top: 3px;
    float:left;
    width: 13px;
}

#middle-element {
    margin:0 auto;
    text-align: center;
    width: 300px;
}

#right-element {
    float:right;
    width: 100px;
}

Мой html выглядит так:

   <div>
        <div>
            <img src="images/left_element.png" alt="left"/>
        </div>
        <div>
            I am the text inside the middle element
        </div>
        <div>
            I am the text in right element
        </div>
    </div>

Есть идеи?

Спасибо!

css

positioning

html

Поделиться

Источник

luqita    

30 апреля 2011 в 13:54

4 ответа

• Как выровнять div внутри элемента td с помощью класса CSS

  Он работает с этим способом <td align=center> Но я хочу использовать класс CSS. Я определил класс таким образом, но не повезло td { vertical-align: middle; text-align: center; margin-left: auto; margin-right: auto; align: center; } Вертикальное выравнивание работает, а текстовое выравнивание…

• css вертикальное выравнивание вертикальное выравнивание внутри

  Моя цель состоит в том, чтобы создать 3 вертикально выровненных div, где один div имеет вертикальную полосу высоты родителя ( border-right ). родитель может иметь фиксированную высоту, что, в свою очередь, должно позволить использовать вертикальное выравнивание с помощью css (я знаю, что flexbox…

4

Вы не включили css для вашего контейнера div, но всякий раз, когда он содержит плавающие элементы, вы должны скрыть переполнение, например:

#container {
  overflow: hidden;
  width: 100%; /* for good measure */
}

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

<div>
    <div>
        <img src="images/left_element.png" alt="left"/>
    </div>
    <div>
        I am the text in right element
    </div>
    <div>
        I am the text inside the middle element
    </div>
</div>

Вы должны найти, что это работает. Лучшим методом , поскольку я не совсем уверен, что это должно сработать, было бы использование css позиционирования. Примените следующие css:

#container {
  overflow: hidden;
  width: 100%;
  min-height: 36px; /* Remember absolute positioning is outside the page flow! */
  position: relative;
}
#left-element {
  position: absolute;
  left: 9px;
  top: 3px;
  width: 13px;
}
#middle-element {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}
#right-element {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}

Поделиться

lpd    

30 апреля 2011 в 14:32

1

Проблема заключается в том, что средний div имеет заданную ширину, но не плавает, что означает, что он по-прежнему является элементом уровня блока. Даже если сам div не проходит по всей ширине контейнера, он все равно рассматривается как таковой. Вам нужно сделать 2 вещи — поплавать в среднем div, затем очистить поплавки, чтобы контейнер рос с высотой дочерних дивов. Метод clearfix предпочтительнее, поскольку он не вызывает проблем со свойствами CSS3, которые естественным образом выходят за пределы элемента, к которому они применяются (поле-тень, текст-тень и т. Д.).

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Поделиться

Brent Friar    

30 апреля 2011 в 14:53

1

Я думаю, что ваша проблема в том, что вы плавали левым и правым элементом, но не центральным. Попробуйте что-нибудь вроде этого:

CSS:

<style>
    #container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
        #left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
        #middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
        #right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>

HTML:

<div>
    <div>Left Element</div>
    <div>Middle Element</div>
    <div>Right Element</div>
</div>

Поделиться

Jonathan Miller    

30 апреля 2011 в 14:06

0

У меня была точно такая же проблема. Я использовал этот подход. Я сделал центральный элемент отображения встроенным блоком. Таким образом, мне не нужно было придавать элементам определенную ширину или основному контейнеру определенную высоту. Блоки занимали столько же места, сколько и содержимое внутри. Надеюсь, это поможет.

.main-nav {
  text-align: center;
  padding: 2em 3em;
  background: #f4f4f4;
}

#logo {
  margin: 0;
  width: 50px;
  float: left;
  margin-top: 18px;
}

#logo-link {
  float: left;
  display: inline-block;
}

.name {
  display: inline-block;
}

.nav {
  float: right;
  margin-top: 18px;
}
.nav li {
  float: left;
  margin-right: 15px;
  margin-top: 5px;
}

.nav li:last-child {
  margin-right: 0;
}

<header>
      <div>
        <a href="index.html"><img src="img/site-logo.svg" alt="Munchies"></a>

          <div>
            <h2>The Munchies Family Site</h2>
            <h3>Designer</h3>
          </div>

        <nav>
          <ul>
            <li><a href="index.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

сильный текст

Поделиться

Samgraphics    

17 ноября 2017 в 04:12

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

Вертикальное выравнивание элементов внутри UITableViewCell

Можно ли программно установить вертикальное выравнивание (середину) всех элементов внутри прототипной ячейки UITableView (UILabel, UIImageView)? Я хотел бы установить его на середину.

Кроссбраузерное выравнивание div по центру с помощью CSS

Какой самый простой способ выровнять div , чье положение relative по горизонтали и вертикали, используя CSS ? Ширина и высота div неизвестны, то есть он должен работать для каждого измерения div и…

вертикальное выравнивание изображения внутри div

Я хочу установить вертикальное выравнивание изображения внутри div. Я использую img { vertical-align:middle} но это не работает.

Как выровнять div внутри элемента td с помощью класса CSS

Он работает с этим способом <td align=center> Но я хочу использовать класс CSS. Я определил класс таким образом, но не повезло td { vertical-align: middle; text-align: center; margin-left:…

css вертикальное выравнивание вертикальное выравнивание внутри

Моя цель состоит в том, чтобы создать 3 вертикально выровненных div, где один div имеет вертикальную полосу высоты родителя ( border-right ). родитель может иметь фиксированную высоту, что, в свою…

Как установить вертикальное выравнивание элементов, существующих в теге div, по центру с css?

Я пытаюсь установить вертикальное выравнивание элементов, существующих в теге div, по центру. Пожалуйста, совет <div class=new_div> <h4>نام من</h4> <p>توضیحات من</p>…

Выравнивание по вертикали входных элементов в div

Я сделал поиск на SO, чтобы узнать, как я могу выровнять по вертикали входные элементы в div. Этот div находится внутри формы. Большинство вопросов, элементы формы имеют много <div> ‘ s для…

Почему бы выравнивание текста выравнивание текста в div?

Выравнивание текста в div выполняется через text-align . Обычно он работает нормально: <div style=text-align:right;border:1px solid red> this goes to the right </div> У меня есть кусок…

Вертикальное выравнивание внутри сетки CSS

Я хотел бы иметь гигантскую панель прогресса, которая вертикально выровнена внутри сетки CSS. Проблема в том, что вертикальное выравнивание внутри сетки CSS не работает для меня. Я попробовал на…

Измените класс css после заданного количества элементов внутри div

Мне нужно изменить значение css display элементов внутри div с помощью jQuery. Что мне нужно сделать, так это получить количество элементов внутри элемента div. (Экс — Li-элементы). Если количество…

html — CSS: выровнять элемент списка по вертикали и по горизонтали

Заголовок моей страницы содержит неправильно выровненный элемент <li>. Вот скриншот:

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

Я могу выровнять элемент <li>

• горизонтально с style="float:right"
• вертикально с style="vertical-align:middle".

… но не одновременно. Исходя из подобного вопроса, я ожидал, что это сработает:

style="float:right; vertical-align:middle"

Это не так.

Я также нашел несколько способов выравнивания всего списка, но они не были применимы для выравнивания отдельного элемента списка.

Вот соответствующий код html-thymeleaf:

    <div th:fragment="header">
        <nav>
            <ul>
                <li><a href="/"><h3>Personal Expense Tracker</h3></a></li>

                <li th:inline="text"><a href="/logout">[[(${user != null ? 'Logout ' + user : ''})]]</a></li>

            </ul>
        </nav>
    </div>

Вот соответствующий код CSS:

nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}

0

Atte Juvonen

2 Янв 2017 в 05:51

3 ответа

Лучший ответ

С кодом, который вы добавили ..

Используя flexbox, вы можете сделать это:

nav {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  display: block;
  margin: 0;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}

nav ul li {
  margin: 0;
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav > ul > li > a:hover {
  background-color: #111;
}

<div th:fragment="header">
  <nav>
    <ul>
      <li><a href="/"><h3>Personal Expense Tracker</h3></a></li>

      <li th:inline="text" ><a href="/logout">Log out</a></li>

    </ul>
  </nav>
</div>

1

pol
2 Янв 2017 в 04:06

Вопрос немного расплывчатый. Если бы вы могли дать мне представление о вашей проблеме / том, что вы ищете в результате, я, вероятно, мог бы помочь больше.

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

Удачи!

.container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 50%;
  max-width: 1000px;
  height: 100px;
  background: grey;
}

.element {
  position: absolute;
  display: block;
  width: 50%;
  height: 50px;
  background: red;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25%;
}

<ul>
  <li></li>
</ul>

1

Stephen Bennett
2 Янв 2017 в 03:28

Вы должны дать height или line-height элементу (или в некоторых случаях родительский элемент не имеет высоты), чтобы vertical-align:middle не работал, потому что высоты нет. Сначала задайте высоту для элемента, который вы хотите установить вертикально посередине, если он не работает, задайте высоту для родительского элемента.

0

Maharshi
2 Янв 2017 в 03:47

Как выровнять кнопку по центру css

Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.

Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.

Итак, мне нужно выравнять элемент по центру.

Горизонтальное выравнивание

Выравнивание по центру строкового или строково-* элемента

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

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнивание по центру блочного элемента

Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

Выравнивание по центру нескольких блочных элементов

Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:

See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.

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

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание многострочного элемента

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

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Горизонтальное и вертикальное выравнивание

Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.

Вывод

Теперь вы можете всё что угодно выравнять по центру в CSS.

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

Отрицательный отступ

Применяем к блоку свойства top и left, которые выставляются на 50%. Для этого способа необходимо заранее знать размеры блока, половина от которого является значением отрицательного отступа.
Предположим, у нас есть HTML.

CSS в таком случае будет следующим.

Автоматический отступ

Этот способ напоминает предыдущий. Но здесь необходимо выставить атрибуты top, right, bottom и left на 0, а величину отступа выставить на auto. Огромное преимущество метода – наличие рабочих скроллбаров родительского элемента. Но недостаток способа такой же, как и у предыдущего – необходимость жестко задавать размеры блока.
Код выглядит следующим образом.

Таблица

В этом коде необходимо выделить несколько элементов: родителя, ячейку родителя и блок. Первому необходимо задать табличное отображение, второй – ячейку таблицы, а блоку присвоить модель строчного блока.
Ячейке (элементу с классом inner) присваиваем параметры text-align: center и vertical-align: middle. Недостаток способа – не работают скроллбары, да и вообще эмуляция таблицы для выравнивания считается нехорошим тоном в кругу веб-разработчиков.
Пример кода с применением этого метода.

Как выровнять текст по центру?

Чтобы выровнять текст по центру, необходимо присвоить ему свойство text-align со значением center.
Пример кода.

Универсальный способ выравнивания по центру

Предположим, нам надо выровнять кнопку по центру в CSS. Для этого необходимо создать див, в центре которого размещается кнопка, которую мы собираемся ставить посередине, а потом воспользоваться типом отображения flex. Код будет приблизительно таким (описание в самом коде).

Таким способом можно выравнивать абсолютно любые элементы на веб-странице: формы, текст, картинки, меню, заголовки вертикально и горизонтально. Логика универсальна: создается родительский див, в который необходимый элемент загружается в качестве дочернего. В родительском диве прописываются свойства display: flex, align-items: center, justify-content: center, height: 100%. В дочернем прописывается ширина, отступ и другие свойства.
Единственный недостаток способа – он поддерживается только самыми новыми версиями браузеров. Часть свойств можно реализовать через вендорные префиксы (например, -webkit–) для увеличения совместимости со старыми версиями.

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

• Выравнивание по вертикали в уровне 3
• Выравнивание по вертикали и горизонтали в уровне 3
• Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

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

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

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

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

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

таблица стилей выглядит так:

Основные правила:

1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

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

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Created 5 May 2001;
Last updated Вт 05 ноя 2019 19:12:56

Как выровнять заголовок по центру css

Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.

Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.

Итак, мне нужно выравнять элемент по центру.

Горизонтальное выравнивание

Выравнивание по центру строкового или строково-* элемента

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

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнивание по центру блочного элемента

Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

Выравнивание по центру нескольких блочных элементов

Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:

See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.

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

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание многострочного элемента

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

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Горизонтальное и вертикальное выравнивание

Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью Flexbox

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.

Вывод

Теперь вы можете всё что угодно выравнять по центру в CSS.

4 ответа 4

Используя flexbox и height: 100% .

Если хотите и по горизонтали и по вертикали центрировать, то так — https://codepen.io/anon/pen/EbrrrZ

В вашем контексте это будет выглядеть не очень. Вам стоит по лучше разъяснить что именно вы хотите.

1.

2.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 html5 или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

• Выравнивание по вертикали в уровне 3
• Выравнивание по вертикали и горизонтали в уровне 3
• Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

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

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

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

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

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

таблица стилей выглядит так:

Основные правила:

1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

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

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Created 5 May 2001;
Last updated Вт 05 ноя 2019 19:12:56

Как выровнять элементы блока по центру с помощью CSS?

«Блоки» известны тем, что занимают все пространство строки, заставляя другие элементы начинать с новой строки. Другими словами, они имеют ширину 100% веб-страницы или контейнера, содержащего блок. В этой статье мы увидим, как блокировать элементы, которые обычно ведут себя, и как центрировать их с помощью CSS.

Поведение элементов блока: Любой элемент можно настроить так, чтобы он вел себя как блок, установив для его свойства display значение блока «display: block». Есть некоторые другие элементы, такие как заголовки, теги div, которые по умолчанию являются блокированными. Таким образом, они занимают всю строку или всю ширину веб-страницы или контейнера, в котором они находятся. Даже если наш контент занимает 20% ширины веб-страницы, свойство блока все равно зарезервирует полную 100% ширину веб-страницы или контейнера, содержащего его.

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | Курс HTML .

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

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

Примечание: Мы видим, что «text-align: center» не центрирует элементы блока. Они центрируют только неблочные или строчно-блочные элементы.

Центрировать элементы блока с использованием свойства поля: Нам нужно указать поле слева и справа так, чтобы оно выглядело центрированным.Нам не нужно делать это вручную, у нас есть одно значение свойства «auto», которое автоматически устанавливает маржу таким образом, чтобы наш блочный элемент помещался в центр. Используйте приведенное ниже свойство CSS, чтобы центрировать элемент блока.

 маржа: авто 

Пример 1:

HTML

Вывод:

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

002

Пример 2:

Пример 2:

вокруг него немного места, поэтому по умолчанию неблочный элемент будет рядом с тегом img, а не на следующей строке. е.После установки свойства «display: block» мы можем сделать наше изображение блокирующим элементом. Его можно центрировать с помощью свойства «margin: auto».

Примечание: Тег body был установлен на свойство «text-align: center». Мы знаем, что это не влияет на блочные элементы.

HTML

Выход:

с помощью центрального звена

CSS

Из этой статьи вы узнаете, как центрировать гиперссылку с помощью CSS.

Как вы, возможно, знаете, теги привязки имеют свойство отображения «встроенное». Таким образом, центрировать гиперссылку не так просто, как добавить «text-align: center» к тегам привязки.

Для всех следующих примеров представьте, что у нас есть следующий тег привязки:

   Случайная ссылка 
  

Что выглядит так:

Случайная ссылка

Содержание

1) Центрируем ссылки, помещая их внутри текстового блока div с выравниванием.

Поместите HTML-ссылку внутри div. В стилях для div примените text-align: center и сделайте тег привязки встроенным блоком (display: inline-block).

т.е.

  

     Случайная ссылка 

  

Результатов:

2) Центрирование звеньев, поместив его внутрь гибкого контейнера

Поместите ссылку внутри div. В стилях примените к div "display: flex" и "justify-content: center".

  

     Случайная ссылка 

  

Результатов:

3) Центрирование звеньев, поместив его в сетку контейнера

Очень похоже на flex, размещает ссылку внутри div. В стилях примените к div "display: grid" и "justify-content: center".

  

     Случайная ссылка 

  

Результатов:

Центрирование звена по вертикали и горизонтали

Чтобы центрировать гиперссылку по вертикали и горизонтали, вы можете продолжать использовать гибкость или сетку.

В приведенных ниже примерах я установил цвет фона и высоту для div, чтобы вы могли видеть ссылку по центру по вертикали и горизонтали.

Flex

Для центрирования тега привязки с помощью flex. Добавьте эти свойства в div: display: flex; justify-content: center; align-items: center. Код будет выглядеть так:

  

     Случайная ссылка 

  

Результат:

Сетка

Аналогичным образом, чтобы центрировать ссылку по сетке, добавьте эти свойства в div: display: grid; justify-content: center; align-items: center.код будет выглядеть так:

  

     Случайная ссылка 

  

Результат:

Почему бы просто не превратить тег привязки в элемент блока, чтобы центрировать его?

Технически, чтобы центрировать гиперссылку, вы можете установить для ее свойства display значение block и применить text-align: center. Проблема в том, что ссылка будет охватывать всю строку, в которой она находится.

Я продемонстрирую, что я имею в виду, добавив цвет фона к ссылке:

   Случайная ссылка 
  

Результат:

Случайная ссылка

Как видите, берется вся ширина.Напротив, методы, которые я показал вам выше, если вы примените к ним цвет фона, будут выглядеть так:

Сводка

Теперь вы знаете, как центрировать HTML-ссылку (теги привязки) с помощью CSS. Все 3 метода достигают одного и того же, поэтому выбирайте любой.

Хотите узнать, как кодировать и зарабатывать деньги в Интернете? Ознакомьтесь с CodingPhase (реферальная ссылка)

Создание центрированной горизонтальной навигации - CSS Wizardry - Оптимизация веб-производительности

29 января 2011 г.

Написано Гарри Робертсом на CSS Wizardry .

Содержание

1. Демо
2. Обновление

Центрировать элементы уровня блока легко, просто укажите ширину и установите поля : 0 авто; , г.
но что, если вы не знаете эту фиксированную ширину? Вы можете использовать text-align: center;
но это не сработает и для блочных элементов со 100% шириной ...
работать с элементами текстового уровня.

По возможности всегда следует избегать явного определения ширины и высоты,
так как это сделает документ менее ориентированным на будущее, гибким и
расширяемый ... Предположим, у вас есть четыре пункта в меню навигации - вы можете работать
вне их ширины и используйте поле : 0 auto; , чтобы отцентрировать их.Добавление пятого
увеличит ширину, а это значит, что вам также придется изменить CSS. Это далеко
от идеала, и более того, с помощью CMS для управления сайтом (клиент может добавлять страницы,
но, возможно, не может редактировать CSS).

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

В разметке:

  

  
  На главную  
  
  О программе  
  
  Работа  
  
  Клиенты  
  
  Связаться  

  

Довольно стандартный, неупорядоченный список пунктов меню.CSS - вот где это. Я выделил те части, которые выполняют большую часть работы:

  .nav {
    граница: 1px solid #ccc;
    ширина границы: 1px 0;
    стиль списка: нет;
    маржа: 0;
    отступ: 0;
      выравнивание текста: по центру; 
}
.nav li {
      дисплей: встроенный; 
}
.nav a {
      дисплей: строчно-блочный; 
    отступ: 10 пикселей;
}  

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

  / * Исправлено изменение класса кнопок WP5.7 для использования flexbox * /
.wp-block-buttons.aligncenter {
justify-content: center;
}
.wp-block-buttons.alignleft {
justify-content: гибкий старт;
}
.wp-block-buttons.alignright {
justify-content: гибкий конец;
}  

  / * Исправление для класса выравнивания одной кнопки WP5.7 * /
.wp-block-button.aligncenter {
выравнивание текста: центр;
}
.wp-block-button.alignleft {
выравнивание текста: слева;
}
.wp-block-button.alignright {
выравнивание текста: вправо;
}  

 . Контейнер
{
маржа слева: 10%;
маржа-право: 10%;
}
  

 . Контейнер
{
маржа слева: авто;
маржа-право: авто;
ширина: 50em;
}
  

 .контейнер
{
маржа: 0 авто;
ширина: 50em;
}
  

  кузов
{
выравнивание текста: центр;
}

.контейнер
{
маржа слева: авто;
маржа-право: авто;
ширина: 50em;
}
  

  кузов
{
выравнивание текста: центр;
}

.контейнер
{
маржа слева: авто;
маржа-право: авто;
ширина: 50em;
выравнивание текста: слева;
}
  

  HTML {overflow-y: scroll; }
  

  
  <элементы управления видео>
    
  

  

  div.center {
  выравнивание текста: центр;
}
  

  

  <элементы управления видео>
    
  

  

  video.center {
  дисплей: блок;
  маржа слева: авто;
  маржа-право: авто;
}