Html Question posted in
Some basic documentation can be found here.

Html – using text-align in anchor tag?

I am just starting with CSS and was reading about text-align:center; property.

I have a doubt about text-align:center; property. This property center the text inside its parent containing element or inside its box model.

For example:

<div>
 <p>XYZ</p>
</div>

p{
  text-align:center;
}

This will set content of p center inside its box model or according to its parent containing element div.

I think it will center the content of p inside its box model and since p takes the whole width of div it will appear that content of p centered inside div.

text-align:center; with anchor tag ?

<div>
  <a href="#">XYZ</a>
 <div>

Why the below CSS is not centering the anchore inside div.

a{
  text-align:center;
}

but using

div{
  text-align:center;
}

center the anchor inside div?

Tags:

2

Answers


  1. 0

    The content inside the <p>....</p> appears centered because <p> tag in HTML is a block element, which means it will take all the space in its line, blocking other elements from appearing in its line. so even if you have one word in your <p></p> tag it will take the entire space of the line, and when you center it, it will appear in the center of that line.

    But <a></a> is an inline element that will only take the necessary space just to show its content and allow other elements to appear in its line. So centering an anchor tag does not make any change.

    Like the <p> tag, the <div> tag is also a block element. Therefore, it is possible to center the content of the <div> tag.

    You can see this if you check the developer tool that comes with your browser. It will show you how much space is occupied by each HTML element on the page when you hover over the code.

    Also, to see the difference between block elements and inline elements, try adding a couple of <p></p> tags and a couple of <a></a> tags on a page and then you will see the content of the <p></p> tags are appearing one after the other(because <p> tag takes all the space in its line) but <a></a> tags appear in the same line (because <a> tag take just the amount of space it needs to show its content and other inline elements can appear right next to it, in the same line, if there is enough space). If you want to have line breaks between <a> tags you have to use <br> tag between them.

    Run the below snippet and see how much space is taken by <p> tag and <a> tag. I added a background color to show the space taken by each element.

    .color{
 background:black;
 color: white;
}

.center{
 text-align:center;
}
    <p>I am a block element</p>
<p>I don't allow other elements to appear in my line</p>
<p class="color">I take all the space in the line</p>
<p class="center">Therefore, I can be centered.</p>


<a href="#">I am inline</a>
<a href="#">I allow other elements to appear in my line</a>
<a href="#" class="color">Because I take just the amount of space to show my content</a>
<a href="#" class="center">Therefore centering me doesn't make any changes</a>
    Login or Signup to reply.
  2. 0

    It’s because the style applied to A element and since default display style for it is inline, it only takes up the space needed for its content, not entire width of its parent. Therefore, it’s centers text within its own boundaries.

    .center > *
{
  text-align: center;
}

.inline
{
  display: inline;
}

.block
{
  display: block;
}
    <div class="center">
  <div href="#" class="inline">DIV inline</div>
  <div href="#" class="block">DIV block</div>
  <a href="#" class="inline">Anchor inline</a>
  <a href="#" class="block">Anchor block</a>
 <div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search