Can you explain why the text-align property behaves differently on different tags?
In two cases, I am trying to center my text. In the first case, I use a parent div tag with an anchor tag inside. When I need to center align, I apply the property to the parent.
div {
background-color: green;
width: 80px;
text-align: center;
}
However, in the second case, when I use a ul as the parent with the same anchor tag inside, I have to apply the property to the anchor tag to center align the text. Why is that?
ul a {
color: red;
text-align: center;
}
Links to both fiddles: https://jsfiddle.net/ybnzajoo/ https://jsfiddle.net/pc939y7k/
How do I know when to write this property on the parent or the element? When should I apply text-align:center to the parent and when should I apply it to the element?
When should I apply the text-align:center property to the parent, and when should I apply it to the same element?