Css вертикальное позиционирование: Все способы вертикального выравнивания в CSS / Хабр

html — Вертикальное выравнивание с помощью before, элемент не влазит?

Вопрос задан

Изменён 5 лет 7 месяцев назад

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

Как и многие использую before для вертикального выравнивания. И вот если елемент по ширине не влазит, он выходит за род. блок. Что нужно делать в этом случае? Указывать ширину меньше чем у родителя? или использовать минусовой margin для псевдоелемента?

Пример

.parent {
  width: 200px;
  height: 200px;
  background: grey;
  text-align: center;
  overflow: hidden;
}
.child {
  background: red;
  height: 40px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
. parent:before {
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px; //если раскоментировать появиться нужный блок
}
<div>
  <span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum, veniam alias, dolore obcaecati at illo quis consectetur quod quisquam necessitatibus? Voluptatem distinctio odio, quia rerum iusto dolore quod rem!
     </span>
</div>
  • html
  • css

4

Думаю, топикстартер уже разобрался с данной проблемой, но, возможно, это решение пригодится кому-то еще.

Чтобы вертикально центрировать блок, используя псевдоэлемент :before, не обязательно задавать ему отрицательный margin, достаточно задать блоку-родителю font-size:0px — это избавит нас от «лишнего» пространства между

inline-элементами:

. parent {
  width: 200px;
  height: 200px;
  background: grey;
  text-align: center;
  overflow: hidden;
  font-size: 0px;
}

.child {
  width: 100%;
  background: red;
  height: 40px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 20px;
}

.parent:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
<div>
  <span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laborum, veniam alias, dolore obcaecati at illo quis consectetur quod quisquam necessitatibus? Voluptatem distinctio odio, quia rerum iusto dolore quod rem!
     </span>
</div>

1

Для вертикального выравнивания уже можно использовать flex-box. Он уже достаточно широко поддерживается браузерами.

Свойство margin со значением auto применимое к ребенку flex-родителя — будет выравнивать как по горизонтали так и по вертикали

#parent{
  display: flex; 
  height:300px;
  border: 1px solid red;
}

#parent .child {
  width: 33.3%;
  height:30px;
  border:1px solid black;
  margin: auto; 
}
<div>
  <div>ребенок</div>
   <div>ребенок</div>
  <div>ребенок</div>
</div>

1

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

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

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

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

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

Почта

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

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

Почта

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

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

top; /* Вертикальное выравнивание в ячейках */

border: 2px solid black; /* Граница вокруг ячеек */

padding: 5px; /* Поля вокруг ячеек */

}

TD#leftcol {

width: 200px; /* Ширина левой колонки в пикселах */

background: #ccc; /* Цвет фона левой колонки */

}

TD#rightcol {

background: #fc3; /* Цвет фона правой колонки */

}

#maket #footer{

background: #FBF0DB; /* Цвет фона ячеек */

}

</style>

</head>

<body>

<table cellspacing=»0″ cellpadding=»0″>

<tr>

<td id=»header» colspan=»2″>Заголовок</td>

</tr>

<td id=»leftcol»>Левая колонка</td>

<td id=»rightcol»>Правая колонка</td>

</tr>

<tr>

<td id=»footer» colspan=»2″>Дно</td>

</tr>

</table>

</body>

</html>

Рисунок 7. 8 – Табличный макет сайта

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

Пример.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<html>

<head>

<style type=»text/css»>

#maket {

width: 100%; /* Ширина всей таблицы в процентах */

bordercollapse: collapse; /* Отображать только одинарные линии */

}

#maket #header{

background: #FBF0DB; /* Цвет фона ячеек */

}

#maket TD {

padding: 5px; /* Поля вокруг ячеек */

}

TD#leftcol {

width: 200px; /* Ширина левой колонки в пикселах */

background: #ccc; /* Цвет фона левой колонки */

}

#maket #spacer {

width: 10px /* Расстояние между колонками */

}

TD#rightcol {

background: #fc3; /* Цвет фона правой колонки */

}

#maket #footer{

background: #FBF0DB; /* Цвет фона ячеек */

}

</style>

</head>

<body>

<table cellspacing=»0″ cellpadding=»0″>

<tr> <td colspan=»3″>Заголовок</td> </tr>

<td id=»leftcol»>Левая колонка </td>

<td id=»spacer»></td>

<td id=»rightcol»>Правая колонка</td>

</tr>

<tr> <td colspan=»3″>Дно</td> </tr>

</table>

</body>

</html>

Рисунок 7. 9 – Табличный макет сайта

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для этого также можно использовать соответствующие стили: border-left,

border-right,bordertop,borderbottomилиborder– для всех четырех границ сразу. Общий вид:

border-bottom: [border-width || border-style || border-color] | inherit

Значение borderwidth определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства borderstyle. Значение bordercolor –устанавливает цвет границы. Значение inherit – наследует значение родителя.

Рисунок 7.

10 – Стили рамок

Пример.

TD#leftcol {

width: 200px; /* Ширина левой колонки в пикселах */

background: #ccc; /* Цвет фона левой колонки */

border-right: 4px solid blue; /* Параметры линии */

}

Рисунок 7.11 – Табличный макет сайта

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

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

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

❮ Пред. Следующий ❯

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

Это свойство работает только в следующих контекстах:

  • Для вертикального выравнивания содержимого внутри ячеек таблицы () и элементов с отображением: table-cell.
  • Вертикальное выравнивание блока встроенного элемента внутри его блока строки. Например. его можно использовать для вертикального выравнивания в строке текста.

Мы не можем использовать свойство vertical-align для вертикального выравнивания блочных элементов.

 выравнивание по вертикали: базовая линия | длина | суб | супер | топ | текст сверху | средний | дно| текст внизу | начальная | наследовать; 

Пример свойства vertical-align со значением «sub»:

 

  <голова>
    Название документа
    <стиль>
      охватывать {
        вертикальное выравнивание: суб;
      }
    
  
  <тело>
     

Пример свойства вертикального выравнивания

Это какой-то абзац с Свойство vertical-align.

Попробуй сам »

Результат

Пример свойства vertical-align со значением «middle»:

 

  <голова>
    Название документа
    <стиль>
      охватывать {
        вертикальное выравнивание: посередине;
      }
    
  
  <тело>
     

Пример свойства вертикального выравнивания

Это какой-то абзац с Свойство vertical-align.

Попробуй сам »

Пример свойства vertical-align со значением «super»:

 

  <голова>
    Название документа
    <стиль>
      охватывать {
        вертикальное выравнивание: супер;
      }
    
  
  <тело>
     

Пример свойства вертикального выравнивания

Это какой-то абзац с Свойство vertical-align.

Попробуй сам »

Пример свойства vertical-align со значениями «top» и «bottom»:

 

  <голова>
    Название документа
    <стиль>
      стол {
        ширина: 100%;
        граница коллапса: коллапс;
      }
      стол,
      й,
      тд {
        граница: 1px сплошная #cccccc;
      }
      тд {
        высота: 100 пикселей;
      }
      . вершина {
        вертикальное выравнивание: сверху;
      }
      .нижний {
        вертикальное выравнивание: снизу;
      }
    
  
  <тело>
     

Пример свойства вертикального выравнивания

<таблица> Внизу Средний Вверх Некоторый текст Некоторый текст Некоторый текст

Попробуй сам »


Вертикальное центрирование элементов переменной высоты внутри контейнера с помощью CSS | by Hajime Yamasaki Vukelic

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

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

 

Отцентрируйте меня!

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

 .container { 
пробел: nowrap;
} .container:after {
содержимое: ''; Дисплей
: встроенный блок;
высота: 100%;
вертикальное выравнивание: посередине;
ширина: 0;
}.child {
display: inline-block;
вертикальное выравнивание: посередине;
пробел: обычный;
}

Как это работает. Если вы новичок в псевдоэлементах, они действуют как элементы, которые добавляются ( :после ) или добавляются в начале ( :до ) к содержимому элемента, для которого они определены. Добавляя один элемент в контейнер, мы фактически добавляем родственного элемента для дочернего элемента. Когда у двух соседних братьев и сестер vertical-align: middle на них определено правило, они выравниваются друг с другом по вертикали по середине. Делая псевдоэлемент равным 100% высоты родительского элемента, мы эффективно выравниваем середину дочернего элемента с серединой родительского элемента.

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

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

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

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

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