When you want to center the text, it is “text-align:center;” which is described as usual, but sometimes, it seems that “text-align:center” does not work.

Especially when there is “div” tag, “text-align” does not seem to work.

As I had a little hardship, I studied the function of “text-align” again, so I will show it.

1. What does “text-align” work on?

“text-align” is CSS to specify for block elements. And it works on inline elements in the block element.

text-align is CSS that can be specified for block elements such as p tags and header tags such as h1 tags and div tags, but the effect appears in inline elements such as text. That is, they work with inline elements within block elements, not block elements themselves.

The following code and display results may be helpful.

<p class="sample01">
sample<br>
01
</p>
<p class="sample02">
sample<br>
02
</p>
<p class="sample03">
sample<br>
03
</p>

p.sample01{
border:1px solid #f00;
width:250px;
text-align:center;
}
p.sample02{
text-align:center;
}
p.sample03{
border:1px solid #f00;
text-align:center;
}

Sample01 above specified CSS width and CSS border in the p tag which is a block element.
The text in the p tag is centered, but the p tag itself is not centered on the screen.

When you look at sample 02, it looks as if the p tag itself was placed at the center, but this is because the p tag will be 100% of the screen width if you do not specify the width, so only the text in the p tag is the center It is aligned.

It may be understandable to see that the border is specified to p tag of sample03.

So how can you place the block element itself in the center?

How to place block elements in the center.

If you want to place the block element at the center, specify width and then specify auto on the left and right of margin.

So, let’s put sample01 in the center of the text and p tag itself.

<p class="sample01">
sample<br>
01
</p>

p.sample01{
border:1px solid #f00;
width:250px;
text-align:center;
margin:0 auto;
}

It was placed in the center by specifying auto on the left and right of p tag’s margin.

2. Child elements inherit the text-align of the parent element!

Child elements inherit the text-align of the parent element. However, there are times when it does not inherit.

Let’s nest elements by div tag and see various movements.

2-1. When a child element inherits by specifying text-align in div tag.

<div>
<table border="1">
<tr><td width="100">１</td><td width="100">２</td></tr>
<tr><td width="100">３</td><td width="100">４</td></tr>
</table>
</div>

div{
text-align:center;
}

The above has nested table tags in the div. And, the text is in the table. The table tag in the div tag becomes a block element.

In this case, the text is aligned in the center of the cell because text-align acts on the text that is an inline element in the td tag.

The text in this td tag inherits the parent block element div’s text-align.

To center this table tag itself, specify atuo to the left and right of margin.

2-2. When inheriting to a child element by specifying text-align in div tag.

Next, try to nest p tags into div tags.

<div class="outBox">
<p class="inBox">sample<br>
04</p>
</div>

div.outBox{
text-align:center;
}

This is also placed in the center by inheriting the text-align of the div tag that is the parent element of the p tag. As width is not specified, it is placed at the center of the screen.

2-3. When specifying text-align in div tag and not inheriting to child element.

The following is an example when specifying text-align in div tag does not inherit to child elements.
html is exactly the same as 2-2 above, and p tags are nested in div.

css specifies text-align for both p tag and div tag.

<div class="outBox">
<p class="inBox">sample<br>
05</p>
</div>

p.inBox{
text-align:right;
}
div.outBox{
text-align:center;
}

The above css is right-justified by specifying text-align: right; in the p tag in the second line.
After that, line 5 specifies text-align: center; in the div tag.

3. Summary

thank you for reading.