Css вертикальное центрирование текста: Центрирование горизонтальное и вертикальное

CSS: центрировать текст как по горизонтали, так и по вертикали?

Я создаю новый сайт, и мне нужно что-то знать(покажу на примере).

Допустим, я сделал это:

html;

<div>
   <ul>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
</div>

и css:

#center-in-bar {
   list-style:none;
   display:inline-block;
   /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}

Что мне сделать, чтобы все элементы li были центрированы как по горизонтали, так и по вертикали? В элементе center-in-bar?

Любая помощь будет оценена :))

css

html

Поделиться

Источник

Stian Olsen    

18 ноября 2011 в 18:30

4 ответа

• css трюк для центрирования по горизонтали и вертикали

  Мой класс .cent предназначен для <li> элементов. Я хочу центрировать текст <li> как по горизонтали, так и по вертикали. text-align:center; заботится о горизонтальном центрировании, но вертикальное центрирование не работает. Что за трюк CSS для этого? .cent{ height:20px; width:20px;…

• Установите текст в UILablel как по вертикали, так и по горизонтали по центру без изменения рамки

  Как указано в названии, я хотел бы центрировать текст в UILabel как по горизонтали, так и по вертикали .. Я могу выровнять его по вертикали, если вызову size to fit , а по горизонтали — через setAdjustsFontSizeToFitWidth , но использование обоих вместе, похоже, противодействует друг другу …..

11

Попробуйте этот фрагмент CSS:

#center-in-bar ul {
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
#center-in-bar li {
    ...
    display:inline; /* you might want to use this instead of "inline-block" */
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}

Поделиться

Unknown    

12 декабря 2011 в 15:55

8

Так или иначе, до сих пор нет стандарта для этого, но, по моему опыту, следующее, вероятно, самое надежное решение в целом:

<style type="text/css"> 
    #container {     
        display:table;     
        border-collapse:collapse;   
        height:200px;   
        width:100%; 
        border:1px solid #000; 
    }          
    #layout {     
        display:table-row;    
    }            
    #content {     
        display:table-cell;   
        text-align:center;  
        vertical-align:middle;     
    }            
</style>      
<div>     
    <div>     
        <div>  
            Hello world!  
        </div>      
    </div>    
</div> 

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

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%; /* adjust this as needed */     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div> 
    <div> 
        Hello world! 
    </div>               
</div> 

Важное замечание:

Когда задают этот вопрос, кто-то всегда предлагает line-height в качестве решения, но я бы умолял вас держаться подальше от этого предложения. Это выглядит хорошо, когда вы демонстрируете что-то простое, например «Hello World,», но line-height ужасно ломается, когда текст обертывается.

Поделиться

James Johnson    

18 ноября 2011 в 18:32

Поделиться

efirat    

25 мая 2012 в 11:50

0

КАК ГОРИЗОНТАЛЬНО ЦЕНТРИРОВАТЬ ЭЛЕМЕНТ БЛОКА (НАПРИМЕР, DIV) ИЛИ ВСТРОЕННЫЙ ЭЛЕМЕНТ (НАПРИМЕР, ТЕКСТ)

Допустим, вы хотите центрировать документ на странице браузера, чтобы независимо от размера вашего браузера элемент всегда был центрирован:

    body {
     margin:50px 0px; padding:0px;
     text-align:center;
    }

    #Content {
     width:500px;
     margin:0px auto;
     text-align:left;
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;
    }

напишите это HTML для центрирования чего-то горизонтально между тегами вашего тела:

<body>
<div>I am a centered DIV</div>
</body>

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

    #Content {
     width:500px;
     margin:0px auto;
     text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;

    }

КАК ВЕРТИКАЛЬНО ЦЕНТРИРОВАТЬ ЭЛЕМЕНТ БЛОКА (НАПРИМЕР, DIV) ИЛИ ВСТРОЕННЫЙ ЭЛЕМЕНТ (НАПРИМЕР, ТЕКСТ)

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

Что касается вертикального центрирования элементов, есть 3-5 метода, которые вы можете использовать в зависимости от того, что вы пытаетесь центрировать.

Этот сайт легко описывает каждый метод для вас:
http://blog.themeforest.net/учебники/vertical-centering-with-css/

Желаю удачи!

Поделиться

Downpour046    

18 ноября 2011 в 19:31

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

Как центрировать div как по вертикали, так и по горизонтали

Я хотел бы центрировать текст как по вертикали, так и по горизонтали apple. Я перепробовал все уже предложенные решения (внутренний div, вертикальное выравнивание, margin:auto…) Я просто не…

Как центрировать текст по горизонтали и вертикали в пределах пунктирной границы

Мне нужно центрировать текст между пунктирной границей по вертикали и горизонтали, как показано на рисунке ниже : У меня есть очень простой fiddle, который пытается достичь этого. Как можно изменить…

Как центрировать текст по горизонтали и вертикали в TextView?

Как мне центрировать текст по горизонтали и вертикали в TextView , чтобы он появился точно в середине TextView в Android ?

css трюк для центрирования по горизонтали и вертикали

Мой класс .cent предназначен для <li> элементов. Я хочу центрировать текст <li> как по горизонтали, так и по вертикали. text-align:center; заботится о горизонтальном центрировании, но…

Установите текст в UILablel как по вертикали, так и по горизонтали по центру без изменения рамки

Как указано в названии, я хотел бы центрировать текст в UILabel как по горизонтали, так и по вертикали .. Я могу выровнять его по вертикали, если вызову size to fit , а по горизонтали — через…

HTML-CSS центрируйте текст по горизонтали и вертикали в ссылке

Я пытаюсь сделать ссылку, которая имеет height и width 200px. Текст ссылки должен быть центрирован по вертикали и горизонтали. Это мой CSS до сих пор: a:link.Kachel { width: 200px; height: 200px;…

Как центрировать текст по горизонтали и вертикали внутри элемента box?

Используя HTML/CSS, я хочу создать кнопочную ссылку: a.btnlink{ border: 2px solid #808080; -webkit-box-align: center; -moz-box-align: center; box-align: center; display: -webkit-box; display:…

Сделайте так, чтобы текст появлялся в центре SPAN по горизонтали и вертикали

Я хочу отобразить некоторый текст в DIV, который должен появиться в центре SPAN-как по вертикали, так и по горизонтали. Это мой jsfiddle- http://jsfiddle.net/8Syqv/13 / HTML: <span>something…

CSS: как центрировать текст по вертикали и горизонтали над изображением

Все, что я хочу сделать, это центрировать свой текст по вертикали и горизонтали на img.. Перепробовал много чего, но пока ничего не работает :/ <div class=img_container> <img…

Как центрировать текст по вертикали и горизонтали в Flutter?

Я хотел бы знать, как центрировать содержимое текстового виджета по вертикали и горизонтали в Flutter. Я знаю только, как центрировать сам виджет с помощью Center(child: Text(«test»)) , но…

Проблема вертикального центрирования многострочного текста

В процессе создания веб-страницы мы часто сталкиваемся с проблемой центрирования текста по вертикали. Центрирование однострочного текста легко решить с помощью line-height, но многострочный текст центрируется по вертикали, но этот метод нельзя использовать для Установите его. Ниже приводится сводка пользователей сети. Есть два метода для справки:

Метод 1. Используйте атрибуты display: table и display: table-cell для имитации таблицы.

1. Установите атрибут display: table для внешнего поля, чтобы имитировать таблицу.

2. Оберните тег span за пределы текста и установите для него атрибуты display: table-cell и vertical-align: middle.

Эффект показан на рисунке:

код показан ниже:

HTML-код:

1 <div>
2     <span>
3         <p>Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали.</p>
4     </span>
5 
6 </div>

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

 1 <style type="text/css">
 2         *{margin: 0;padding: 0;}
 3         .box{
 4             margin: 40px auto;
 5             border: 1px solid #ccc;
 6             width: 300px;
 7             height: 300px;
 8             display: table;
 9         }
10         .box span{
11             display: table-cell;
12             vertical-align: middle;
13         }
14 </style>

Этот метод может эффективно улучшить возможность повторного использования кода, но этот метод несовместим с IE6 / 7!

Метод 2: имитация однострочного текста для центрирования многострочного текста

1. Установите фиксированную ширину и высоту для периферийного блока
2. Задайте для него свойство display: inline-block, чтобы преобразовать его во встроенный блочный элемент и смоделировать его в одну строку текста. И установите свойство vertical-align: middle, чтобы его базовая линия была выровнена. Добавьте свойство line-height, чтобы переопределить высоту строки, заданную полем.

Эффект показан на рисунке:

код показан ниже:

HTML код:

1 <div>
2    
3         <p>Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали. Многострочный текст центрируется по вертикали.</p>
4    
5 
6 </div>

Код CSS:

 1 <style type="text/css">
 2     *{margin: 0;padding: 0;}
 3     .box{
 4         margin: 40px auto;
 5         border: 1px solid #ccc;
 6         width: 300px;
 7         height: 300px;
 8         line-height: 300px;
 9     }
10     .box p{
11         display:inline-block;
12         line-height: 30px;/*Заменить высоту строки родительского элемента*/
13         vertical-align: middle;/*Базовая линия по центру*/
14     }
15 </style>

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

Перепечатано по адресу: https://www.cnblogs.com/forest-green/p/6117607.html

Работающие методы центрирования CSS | {dev-tricks}

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

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

1. Центрируемый элемент строчный (inline):

Можно назначить родительскому контейнеру свойство text-align:center. Ниже пример:

See the Pen wzjPWN by Ruslan (@rkaliev) on CodePen.0

2. Центрируемый элемент блочный (block):

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

See the Pen BLxmLr by Ruslan (@rkaliev) on CodePen.0

3. Несколько  блочных элементов  в ряду:

Можно указать для них тип отображения inline-block или же применить flexbox. Ниже пример:

See the Pen YGLEpa by Ruslan (@rkaliev) on CodePen.0

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

Что же касается текста, то многие для центрирования по вертикали начинают  использовать свойство vertical-align, что вполне логично.  Но, к сожалению, оно не действует в блочных элементах (например,в  параграфах (p) внутри элемента (div)).  Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.

1. CSS метод со свойствами таблиц

Свойство vertical-align отлично действует для ячеек таблиц.  Представим родительский элемент как таблицу, а дочерний как ячейку и применим свойство  vertical-align: middle для вертикального центрирования содержания. В итоге контент в элементе-потомке отцентрируется по вертикали. Рассмотрим наш пример:

HTML:

CSS:

2. Центрирование с помощью внутренних отступов (если элемент строчный )

Если элемент помещается в одну строку, то его можно отцентрировать с помощью одинаковых верхних и нижних внутренних отступов (padding).

CSS:

Пример:

See the Pen JRvOEJ by Ruslan (@rkaliev) on CodePen.0

3.  Использование line-height

Если предыдущий  способ  вам не подходит, а вы хотите отцентрировать текст, чтоб он не переносился на  следующую строку, можно использовать  line-height равный высоте элемента:

CSS:

Пример:

See the Pen ALabqL by Ruslan (@rkaliev) on CodePen.0

4. Абсолютное позиционирование (если элемент блочный)

Если вам известна высота центрируемого элемента, то вот еще один способ вертикального центрирования.

CSS:

Пример:

See the Pen jrxamO by Ruslan (@rkaliev) on CodePen.0

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

CSS:

А вот и пример:

See the Pen LRmOyO by Ruslan (@rkaliev) on CodePen.0

5. Использование  flexbox (если элемент блочный)

Используя flexbox, можно всё сделать проще с меньшим количеством кода.

CSS:

А вот и пример:

See the Pen mALqmG by Ruslan (@rkaliev) on CodePen.0

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

1.  Фиксированная высота и ширина элемента

Если у элемента фиксированная высота и ширина, то используем отступы с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, это и отцентрирует элемент внутри родителя. Способ хорошо поддерживается браузерами.

CSS:

Пример:

See the Pen yajPXY by Ruslan (@rkaliev) on CodePen.0

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

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

CSS:

3. Flexbox снова приходит на помощь

Для центрирования горизонтально и вертикально подойдет также flexbox:

CSS:

See the Pen vXjWkA by Ruslan (@rkaliev) on CodePen.0

Источник: css-tricks.com

Центрирование в CSS — OLDESIGN.RU

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

 

Давайте построим древовидную схему для принятия решения и будем надеяться, что это всё немного упростит.

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

Строчные элементы (тексты, ссылки) с типом отображения inline, inline-block, inline-table, inline-flex, внутри родительского блочного можно центрировать так:

 

.center-children {
  text-align: center;
}

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

 

.center-me {
  margin: 0 auto;
}

Способ работает независимо от ширины центрируемого блочного элемента и его родителя. Обратите внимание, что заставить элемент плавать по центру с помощью float нельзя.

 

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

 

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

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

С вертикальным центрированием в CSS все немного сложнее:

 

Элемент строчного типа помещающийся в одну строку:

Иногда строчные/текстовые элементы могут выглядеть отцентрированными по вертикали только потому, что у них одинаковые верхнее и нижнее поля (padding).

 

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Если использование полей по какой-либо причине невозможно, а вы хотите отцентрировать текст, который точно не будет переноситься в следующую строку, можно использовать хитрость с установкой line-height равной высоте элемента, это отцентрирует текст:

 

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

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

 

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

 

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

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

 

Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст выравнивается по горизонтали по этому элементу:

 

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

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

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

 

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

 

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

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


Можно центрировать, подняв вверх на половину его высоты после того, как сдвинули его наполовину вниз:

 

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Всё это можно сделать значительно проще с помощью flexbox.

 

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

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

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

 

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

 

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

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

 

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

 

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox

 

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

 

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Краткий совет AtoZ CSS: вертикальное центрирование текста и значков

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

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

V для вертикально центрирования текста и значков

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

Используйте

line-height для простого вертикального центрирования

Для вертикального центрирования отдельной строки текста или значка внутри его контейнера мы можем использовать свойство line-height . Это свойство контролирует height строки в серии текста и добавляет одинаковое количество пространства над и под линейным блоком встроенных элементов. Если height контейнера известна, то установка line-height того же значения будет вертикально центрировать дочерние элементы.

 .container { width: 200px; height: 200px; line-height: 200px; } 

Используйте

position и transform для гибкого вертикального центрирования

Вышеуказанный метод line-height быстрый и грязный, но опирается на фиксированную высоту. Я стараюсь не задавать height явно, поскольку это часто может ограничивать поток контента в адаптивном проекте. Этот метод недостаточно гибок, если вы работаете с элементами переменной или height жидкости.

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

 .container { position: relative; min-height: 100vh; } .vertical-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 

Сначала мы создаем контекст позиционирования путем установки position:relative элемента контейнера. Это позволит нам расположить элемент .vertical-center пределах его границ.

Затем мы помещаем top left угол элемента, который должен быть центрирован по точному центру контейнера, располагая его top край на 50% от top его родителя и на 50% от left от его родителя.

Наконец, элемент смещается обратно в центр, переводя его на 50% от его height и left на 50% его width . Наш элемент теперь вертикально и горизонтально центрирован внутри контейнера. Поскольку размещение выполняется с процентными значениями, которые относятся к размеру элемента, если width или height контейнера или дочернего элемента изменится, элемент останется центрированным.

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

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

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

Для центрирования элемента с помощью flexbox мы можем использовать следующий фрагмент:

 .container { display: flex; justify-content: center; align-items: center; } 

Этот компактный фрагмент превращает наш .container в гибкий контейнер, который автоматически превращает его дочерние элементы в гибкие элементы. Эти гибкие элементы можно затем центрировать по горизонтали с помощью justify-content и по вертикали с помощью align-items .

Используйте CSS для центрирования изображений и других объектов HTML

Центрируйте изображения, текст и блокируйте элементы при создании сайтов

Дженнифер Кирнин

Опубликованный автор с обширными навыками создания сайтов и управления ими.

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

Правильный способ добиться визуального вида центрированных изображений или текста или даже всей вашей веб-страницы — использовать каскадные таблицы стилей (CSS). Большинство свойств для центрирования были в CSS начиная с версии 1.0, и они прекрасно работают с CSS3 и современными веб-браузерами.

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

Использование CSS для центрирования элементов в HTML

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

На высоком уровне вы можете использовать CSS для:

• Центр текста
• Центрировать элемент уровня блока (например, деление)
• Центрировать изображение
• Вертикально центрировать блок или изображение

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

Центрирование текста с помощью CSS

Самая простая вещь для центрирования на веб-странице — это текст. Для этого нужно знать только одно свойство стиля:

выравнивания текста

, Возьмите стиль CSS ниже, например: p.center {text-align: center; }

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

Вот пример этого класса, примененного в документе HTML:

Этот текст по центру.

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

Центрирование блоков контента с помощью CSS

Блоки — это любые элементы на вашей странице, которые имеют определенную ширину и устанавливаются как элемент уровня блока. Часто эти блоки создаются с использованием HTML

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

авто

, Вот CSS для деления, к которому применен атрибут класса «center»: div.center {

поле: 0 авто;

ширина: 80 мкм;

}

Этот сокращенный CSS для свойства margin устанавливает верхнее и нижнее поля равным 0, в то время как левый и правый будут использовать «auto». По сути, это занимает любое доступное пространство и равномерно делит его между двумя сторонами окна области просмотра, эффективно центрируя элемент на странице.

Вот это применяется в HTML:

Весь этот блок в центре,

но текст внутри него выровнен по левому краю.

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

Центрирование изображений с помощью CSS

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

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

img.center {

дисплей: блок;

поле слева: авто;

поле справа: авто;

}

А вот HTML-код для изображения, которое мы хотели бы отцентрировать:

Вы также можете центрировать объекты, используя встроенный CSS (см. Ниже), но этот подход НЕ рекомендуется, поскольку он добавляет визуальные стили в вашу HTML-разметку. Помните, что мы хотим разделить стиль и структуру, поэтому добавление стилей CSS в ваш HTML-код нарушит это разделение, и поэтому его следует избегать, когда это возможно.

Центрирование элементов по вертикали с помощью CSS

Центрирование объектов по вертикали всегда было сложной задачей в веб-дизайне, но с выпуском модуля CSS Flexible Box Layout в CSS3 теперь есть способ сделать это.

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

вертикальные выравнивания

с

средний

value..vcenter {

выравнивание по вертикали: среднее;

}

Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox, хотя все больше и больше приходит к этому новому методу CSS-разметки! Фактически, все современные браузеры сегодня поддерживают этот стиль CSS. Это означает, что вашей единственной заботой о Flexbox будет гораздо более старая версия браузера.

Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст по вертикали в контейнере, используя следующий метод:

1. Поместите элементы для центрирования внутри содержащего элемента, такого как div.
2. Установите минимальную высоту для содержащего элемента.
3. Объявите этот элемент как ячейку таблицы.
4. Установите вертикальное выравнивание на «середину».

Например, вот CSS:

.vcenter {

минимальная высота: 12em;

дисплей: таблица-ячейка;

выравнивание по вертикали: среднее;

}

А вот и HTML:

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

Вертикальное центрирование и старые версии Internet Explorer

Есть несколько способов заставить Internet Explorer (IE) центрироваться, а затем использовать условные комментарии, чтобы только IE видел стили, но они немного многословны и уродливы. Хорошая новость заключается в том, что с недавним решением Microsoft отказаться от поддержки более старых версий IE, те неподдерживающие браузеры должны скоро выйти, что облегчает веб-дизайнерам использование современных подходов к макетированию, таких как CSS FlexBox, которые сделают все макеты CSS, не просто центрирование, это проще для всех веб-дизайнеров.

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

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

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

Первый метод с line-height

Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .

первый пример. демо №1

Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .

Выравнивание со свойством position

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

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

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

Выравнивание со свойством table

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

Выравнивание со свойством flex

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

Выравнивание со свойством transform

И последний в нашем списке, но далеко не последний в использовании способ. Сдвигаем по вертикали элемент на желаемое значение, в данном случае на -50%.

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

Решение задачи

«Правильные» браузеры (включая MSIE

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div <
display: table-cell;
vertical-align: middle;
>

div <
display: table-cell;
vertical-align: bottom;
>

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div <
position: relative;
>
div span <
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
>

Этот набор правил работает и в «правильных» браузерах.

Указывать свойства

div span <
display: block;
width: 100%;
>

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

div <
position: relative;
>
div span <
display: block;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
>
div span span <
position: relative;
top: -50%;
>

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

Существует другой способ решения этой задачи для MSIE — использование expression . Недостаток этого подхода — выравнивание не будет работать при отключенном Javascript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).

Заключение

Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег

и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

Общие сведения о выравнивании по вертикали или «Как (не) центрировать содержимое по вертикали»

Часто задаваемые вопросы по различным каналам IRC, на которых я помогаю, — это Как мне вертикально центрировать мои вещи внутри этой области? За этим вопросом часто следует . Я использую vertical-align: middle , но он не работает!

Проблема здесь тройная:

1. HTML-макет традиционно не предназначен для определения вертикального поведения. По самой своей природе он масштабируется по ширине, и содержимое перетекает до соответствующей высоты в зависимости от доступной ширины.Традиционно горизонтальная калибровка и разметка просты; вертикальный размер и макет были выведены из этого.
2. Причина, по которой vertical-align: middle не выполняет то, что нужно, в том, что автор не понимает, что он должен делать, но…
3. … это потому, что спецификация CSS действительно облажалась (на мой взгляд) — vertical-align используется для указания двух совершенно разных вариантов поведения в зависимости от того, где он используется.

выравнивание по вертикали в ячейках таблицы

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

   , но вы никогда не должны использовать valign  -> 
 ... 
 ... 
  

Показанный в вашем браузере выше (с соответствующими оболочками) отображается как:

  

 foo 
 bar   

  
...


 Эй, смотрите! Я по центру вертикально! 
 Как это мило ?! 

  

  
...

Эй, это вертикально по центру.Ура!