Html centering a span

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>

Источник

Centering in CSS

Before starting, can you please choose your favorite plate from the below?
You will play with it throughout the guide.

Horizontal Centering

Inline Elements

Text Align

To center an inline element like a link or a span or an img, all you need is text-align: center .

For multiple inline elements, the process is similar. It’s possible by using text-align: center .

Flexbox

By changing the desk display type to flex, we can easily center the content of it.

Even for multiple inline items, the centering works seamlessly.

CSS Grid

With a grid container, the plate will centered according to its grid area. Note that this won’t work with more than one plate unless they are wrapped in an element.

I wrote a guide about grid and flexbox alignment. Learn about box alignment.

Block Elements

Auto Margin

A block element with a known width and height can be centered by using an auto value for the left and right margins.

Auto Margin

With multiple block elements, they should be wrapped in an element to be centered.

Flexbox

You can use flexbox to center the plate.

Also, you don’t need to wrap the plates in wrapper to center them. Flexbox can do that!

CSS Positioning

By absolutely positioning the plate, we can easily center it horizontally with CSS transforms.

I wrote a guide about CSS positioning in detail. Learn about CSS positioning.

In case the element width is known, you can use a negative margin instead of CSS transforms.

Vertical Centering

Inline Elements

Vertical Padding

One of the easiest ways to vertically center an element is using padding.

Vertical Align

The vertical-align property can be used for one or multiple elements.

In this example, the fork and the knife should be centered vertically with the plate.

Flexbox

To align the plate, fork, and knife, we can use flexbox for that.

Block Elements

Absolute Positioning

By positioning an element absolutely, it’s possible to center it vertically with CSS transforms.

If the element height is known, you can use negative margin instead of positioning.

CSS Grid

With CSS grid, we can use align-items to center an item vertically to its grid area.

Horizontal & Vertical Centering

Inline Elements

Padding and Text Align

We can combine padding and text-align to center an element horizontally and vertically.

Other Element Types

Absolute Positioning

By absolutely positioning the plate to the left and right sides.

Flexbox

By using setting justify-content and align-items to center, it’s easy and straightforward.

CSS Grid

With the place-items property, it combines justify-items and align-items .

I’m excited to let you know that I’m writing an ebook about Debugging CSS. If you’re interested, head over to debuggingcss.com and subscribe for updates about the book.

The End

Thanks a lot for following along until you reached there. It means the world for me and the plates.

Источник