Span css по центру

This post and this website contains affiliate links. See my disclosure about affiliate links.

how to center text horizontally inside an HTML element such as div or span

When coding your webpage layout in HTML, you will often need to center elements inside or with in another HTML element. Centering a text (or any element) means horizontally aligning the piece of content in the center of the parent tag. Quite often, it will be text that needs to centered but it can be an image or any other visual content.

The CSS text-align property of the tag specifies the horizontal alignment of its child elements. There are several different values that you can use with the text-align property: left, right, center, justify, initial and inherit. It should be obvious from these values that you can specify center as the value to align the element in the center (or middle).

Almost any visual element can be centered with in a block or any layout tag. The common and usual parent tags that you are likely to encounter are div, span, p etc. The text-align property can be used with any of these tags. There are mainly two different ways you can specify these CSS property: inline or in external file.

Center Text Element in div or span

Inline HTML code

You can use the style attribute of the div or span tag, where ever you are defining the tag in the HTML. So, if you have a div element with text inside such as the example below then you can specify the text-align property as in the example below.

This is my example text that will be centered

The above example will display as shown below. I have added a blue border to make the parent element visible and recognizable.

Using CSS

You can also specify these properties in an external CSS file, as you should and is the recommended approach. You can create a named rule and then use it repeatedly through out your code. In this example, we create a rule or class called mycenter

In the CSS File:
.mycenter text-align: center;
width: 80%;
>

In HTML Page:
This is my example text that will be centered

Centering the Block or Image Element in a div or span

In most cases, when working with text inside the div or span tags, the above CSS property is enough to achieve what you want. In some other scenarios, especially when there is a child block tag involved and you want to horizontally center the entire block thus ensuring that both the left and right margins are equal, you will need to specify the margin as well.

In CSS file:
.myblockcenter text-align: center;
margin-left:auto;
margin-right: auto;
>

Depending on how the blocks are nested and your desired layout, you might need to specify margins in the child block as well. Below is an example, where the styles are defined in-line for easy reference but you could port them into a CSS file as well.

The above example shows how you can center three different child block elements of different or varying widths.

If you are working with older versions of code, then you might have seen the center tag that are widely used to achieve the same (or similar) functionality. The center tag has been deprecated since HTML 4 and not supported in HTML 5, so you will need to update those to CSS.

Troubleshooting

As your layout become complex with different nested tags and block elements, sometimes it can get quite frustrating to figure why the text or block inside div tag is not getting centered even after you have specified it….here are some usual mistakes and troubleshooting tips.

Cached Pages: This is more common than you realize. The browser may be caching the page or the CSS file. Make sure to refresh the page bypassing the cache. You can also delete the cache explicitly. Maybe also try another browser if possible.

Parent Block Width/Alignment: Ensure that the parent block or div tag has the intended width. The child elements are rendered with respect to the parent width, and sometimes the parent may not span the entire width and even with the centered alignment would visually look left oriented, as the entire parent block is aligned to the left. You can debug or identify such issues by using a developer tool or by using temporary borders around the blocks.

Multiple Nested blocks: When there are several nested blocks (span and div), it can be quite difficult to know all the inherited rules for a block. See if there are any properties from the parent or ancestor tag that are getting inherited all the down to your block or tag.

Overlapping CSS Rules: When specifying CSS rules, especially in an external file it is quite easy to have classes which has the same properties with different values. Make sure that your tag is not using multiple classes where one property is getting overridden by a different value from another class.

Spaces and Tabs in CSS Rules: Most of the time, the spaces or blanks are properly handled. Some browsers do have issues with blanks especially in the beginning of the class names or rules. This can cause the rules to be not executed at all, especially if you are using style tags with in the HTML.

Well, using a developer tool to inspect your page layout is a definite must if you are stuck. It is available in most browsers such as Chrome or Firefox.

Источник

How to Vertically Align a Text Within a Tag to the Center

In the example below, we use a element with a class attribute and then style it with CSS. We set the display to «flex», specify the height, border, and padding properties. Then, we add the white-space property with its «normal» value and the word-break property set to «break-word». Finally, we center the text in our by setting the align-items property to «center».

In order to horizontally align a content inside a div or span to center, you should set the justify-content property to center . Click here to learn more.

Example of vertically centering a text within a with the CSS align-items property:

html> html> head> title>Title of the document title> style> .example < height: 200px; border: solid #CCCCCC 2px; padding: 0 10px; white-space: normal; word-break: break-word; display: flex; align-items: center; > style> head> body> span class="example"> This is a vertically aligned text. span> body> html>

Result

In the next example, to center the text inside a , we use the text-align property. Here, we set the display to “inline-block” and specify the width as well.

Example of vertically centering a text within a with the CSS text-align property:

html> html> head> title>Title of the document title> style> span < display: inline-block; width: 9em; text-align: center; border: 1px solid green; white-space: normal; word-break: break-word; padding: 60px 0; > style> head> body> span> This is a vertically aligned text. span> body> html>

In our last example, we use the vertical-align property with the «middle» value and specify the line-height, border, and display properties.

Example of vertically centering a text within a with the CSS vertical-align property:

html> html> head> title>Title of the document title> style> .example < line-height: 150px; border: 1px solid #000; display: inline-block; vertical-align: middle; > style> head> body> span class="example"> This is a vertically aligned text. span> body> html>

Источник

Выравнивание по центру в CSS

Сегодня хочется рассмотреть очень важную тему — выравнивание элементов по горизонтали и вертикали.
Изучим текущее положение дел.
Итак, мы видим, что у нас есть блочный элемент, растягивающийся по ширине на всю страницу, а внутри дочерний строковый span. У обоих элементов по-умолчанию position: static, значит они находятся в потоке.

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

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

А что если бы наш дочерний элемент был бы блочным с заданной шириной? Видим, что на блочное содержимое text-align не действует:

Если мы не зададим ширину, то текст отцентрируется, но лишь потому что элемент займет всю ширину, а нам обычно нужно центрирование самого блока.
В данном случае мы можем прибегнуть к margin: auto. Браузер автоматический определит отступы нашего дочернего элемента со всех сторон. Но посмотрите по вертикали элемент не отцентрировался. Потому что margin-top и margin-bottom приводятся автоматом к 0.

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

Что же нам делать с вертикальным выравниванием?
Рассматриваем известные. Мы знаем высоту родительского элемента, к тому же дочерний элемент — одна строка. Значит можем задать ей высоту:
line-height: 200px;
Ровно столько сколько высота родительского элемента. Так как текст в span встает по центру строки, мы его так отцентрируем.

Аналогично line-height сработает и для строчного дочернего элемента.
Однако, для нескольких строк такой вариант не сработает.
Для наглядности покрасим наш родительский элемент. И можно вспомнить про position: absolute.
Для начала нужно позиционировать родительский элемент, чтобы отсчитывать отступы дочернего относительно него. Ставим в div position: relative.
Далее позиционируем дочерний абсолютно, задаем отступ сверху 50%. Однако, в данном случае по центру у нас будет вершина дочернего элемента. Ставим margint-top равный половине высоты дочернего элемента. В случае с одной строкой эта высота равна line-height.

Отлично, все работает. Разве что перестал работать margin: auto для выравнивания по горизонтали, так как при абсолютном позиционировании margin рассчитывается только если задано расстояние элемента от родительского позиционированного для данной стороны. Т.е. для того, чтобы работал margin: auto для левой и правой стороны, нам нужно задать left и right.

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

Кстати, если дочерний элемент инлайновый и известна высота родителя, то мы можем использовать vertical-align: middle.

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

Почему это работает? Сначала следует сказать,что строчно-блочные элементы выстраиваются в линию, которая заключена в так называемую box-line. Высота коробки зависит от высоты содержимого. Внутри коробки есть базовая линия, на которой располагается строковое содержимое инлайн элемента. Положение этой линии может меняться в зависимости от значения vertical-align любого инлайн элемента, входящего в box-line.
Мы хотим выровнять относительно родительского элемента, значит нужно назначить дочернему его высоту. Мы не можем нашему дочернему поставить такую высоту, ведь он нам нужен не на весь родительский. Тогда мы используем дополнительный элемент. Он невидим, если мы, проставим для него только высоту. Но он меняет положение базовой линии для всей строки. Поэтому аналогично выравнится и исходный элемент.

Еще, конечно, можно воспользоваться flex: justify-content устанавливает выравнивание по горизонтали, а align-items по вертикали. Но обратите внимание на поддержку браузерами.

Источник