Text-align property confusion

Text-align property confusion

I'm learning my way through bootstrap & CSS and sometimes I notice that text-align doesn't always work the same, so for my own understanding, could someone explain the phenomenon that I'm experiencing with text-align: center;?

Reproduction of Problem:

I have a button which consists of a container DIV which is positioned absolute, and within that DIV is an a tag, and within that is a span tag which wraps the link text.

My own understanding of CSS thus far led me to believe that if I applied text-align:center to the a tag, the text should have centered itself within the DIV, but it wasn't until I applied the center rule to the div itself, that the text within it aligned itself. Am I missing something here?

HTML:

          Text      
  

CSS

.link-wrapper{      width: 200px;      height: 35px;      background-color: #c74e3e;      position: absolute;      bottom: 40px;      margin-top: 35px;      /* line-height: 35px; */      padding-top: 6px;  }    .link-wrapper a{      text-align: center;      font-size: 18px;      text-transform: uppercase;  }    .link-wrapper a span{      text-align: center;  }  

Answer by Aroniaina for Text-align property confusion

To center an inline-block or inline level, you have to apply thetext-align: center; to the parent block level like this

.link-wrapper{    width: 200px;    height: 35px;    background-color: #c74e3e;    position: absolute;    bottom: 40px;    margin-top: 35px;    /* line-height: 35px; */    padding-top: 6px;    text-align: center;    }    .link-wrapper a{      font-size: 18px;      text-transform: uppercase;  }

          Text       

Answer by hungerstar for Text-align property confusion

text-align: center; is applied to the elements within the element you apply it to.

As far as why it didn't work on the anchor: An anchor element's () display value by default is inline. Which basically means it will only be as large as it's content. So technically speaking the text was being centered when you applied it to the anchor element but wasn't obvious because the anchor's width was the same as the text.

If you change the display value of the anchor and give it a width you'll see what I'm saying:

              Text        
  

.link-wrapper {      width: 200px;      height: 35px;      background-color: #c74e3e;      position: absolute;      bottom: 40px;      margin-top: 35px;      /* line-height: 35px; */      padding-top: 6px;  }  .link-wrapper a {      display: inline-block;      width: 80%;      border: 1px dashed white;      text-align: center;      font-size: 18px;      text-transform: uppercase;  }  

http://jsfiddle.net/mnekkn03/.

If you were to apply display: block; to the anchor element it would fill up the .link_wrapper DIV and text-align: center would work on the anchor element.

              Text        
  

.link-wrapper {      width: 200px;      height: 35px;      background-color: #c74e3e;      position: absolute;      bottom: 40px;      margin-top: 35px;      /* line-height: 35px; */      padding-top: 6px;  }  .link-wrapper a {      display: block;      border: 1px dashed white;      text-align: center;      font-size: 18px;      text-transform: uppercase;  }  

http://jsfiddle.net/uk91ybca/.

Personally, unless there is other reason to do so, I would apply text-align: center to the .link_wrapper DIV.

              Text        
  

.link-wrapper {      width: 200px;      height: 35px;      background-color: #c74e3e;      position: absolute;      bottom: 40px;      margin-top: 35px;      /* line-height: 35px; */      padding-top: 6px;      text-align: center;  }  .link-wrapper a {      font-size: 18px;      text-transform: uppercase;  }  

http://jsfiddle.net/opamhc3y/

Answer by Lunokhod for Text-align property confusion

Since a and span are inline elements there are no use of adding text-align property to them, their width is equal their content width so there is no space where content can be centered.

You can apply text-align: center; to .link-wrapper, .link-wrapper is a block element and has its own width.

Or you can change display type for a or span to display:block; in order to make them block elements with their own width.

Answer by BDawg for Text-align property confusion

Move text-align to the .link-wrapper rule. The reason this works is because the link-wrapper element is a block (since it's a div). Inline elements such as the or tags always size to their contents, so centering within that context doesn't really make sense. Of course, you can always change this by using display: block in the CSS.

Here, you can see a couple of good, visual examples.

Answer by indubitablee for Text-align property confusion

think of the text-align as a relationship between 2 elements - one outer and one inner. the outer one is the thing that is the width you're working with and the inner one is the thing you want to center inside the outer element.

what you tried to do by putting text-align style in is to center the text in the itself. however, the element's width is normally defined by the length of the text within it, so technically, its working as it should - centering the text of the in the center of the . the width of a just happens to be the same size as the width of the text

however in this case, you want to center the link text within the div .link-wrapper because you want the text (and by default the link element) to be in the center of the div. so you put text-align: center on the div element so that everything inside the div will be centered horizontally.

in the case that you want to center the text within the itself, just stick a width on the (although i dont really find that many useful cases for this particular situation, unless you're making the anchor look like a button with a fixed width)

Answer by Muhammad Umer for Text-align property confusion

For text-align: center;, Summary of Rules:

1. apply to children
2. centers children horizontally
3. only applies to inline and inline block elements

Applying text-align: center; to a tag won't have any effect. Because a tag is an inline element. Inline elements, contrary to block elements don't expand horizontally as much as they can. Instead, they try to shirnk and fit around content inside them. So as small as possible/ fit to content.

Now as you can see even if text inside a element is 'centered' it wont really change anything unless you do:

a.your_ele {     display:inline-block;     width:100%;  }  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72