Как в html текст поднять вверх

Как в html текст поднять вверх

Обновлено: 30 апреля 2019 Как в html текст поднять вверх

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

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:

div {    width: 300px;    margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/  }

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {text-align: center;}

1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}  .box {  width: 400px;  position: absolute;   left: 50%;  margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/  }

1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

<div class="wrapper">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  </div>
.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}  .box {  display: inline-block; /*располагаем блоки в ряд по горизонтали*/  margin-right: -0.25em; /*убираем правый отступ между блоками*/  }

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

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

.button {    height: 50px;    line-height: 50px;  }

2.2. Для выравнивания блока по вертикали внутри родительского блока:

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {position: relative;}  .box {    height: 100px;    position: absolute;    top: 50%;    margin: -50px 0 0 0;  }

2.3. Вертикальное выравнивание по типу таблицы:

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {    display: table;    width: 100%;  }  .box {    display: table-cell;    height: 100px;    text-align: center;    vertical-align: middle;  }

2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {    position: relative;  }  .box {    height: 100px;    width: 100px;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    overflow: auto; /*чтобы контент не расползался*/  }

2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

если для элемента заданы размеры

<div></div>
div {    width: 300px; /*задаем ширину блока*/    height:100px; /*задаем высоту блока*/    transform: translate(-50%, -50%);    position: absolute;     top: 50%;     left: 50%;  }

если для элемента не заданы размеры и он не пустой

<div>    <h1>Some text here</h1>  </div>
h1 {    margin: 0;    transform: translate(-50%, -50%);    position: absolute;     top: 50%;     left: 50%;  }

2.5. Абсолютное позиционирование блока

по центру страницы

<body>  <div class="box"></div>  </body>
div {    width: 500px;    height: 100px; /* если высота не будет задана явна, она будет равна 100% */    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;  }

по центру блока

<div class="wrapper">  <div class="box"></div>  </div>
.wrapper {    position: absolute;  }  .box {    width: 100px;    height: 100px; /* если высота не будет задана явна, она будет равна 100% */    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;  }



Источник: html5book.ru


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