All geek questions in one place

Text alignment align, cannot override

I have text with text-align: justify; , the property is inherited in links and other nested inline elements in this text. I want to set a different text alignment mode for some of them, for example text-align: center; , but I can not. Firebug shows that the parent style is overridden, but the nested inline element is still justified. I noticed this strange behavior in many browsers and obviously they do it by specification? Is it really by design? How to get around this?

EDIT: some sample code. A span with ID = span1 cannot determine the text's own alignment. It should be aligned to the right, but instead it is centered. While I was experimenting, I noticed that inline elements cannot determine text alignment at all. Very strange.

 <html> <head> <style type="text/css"> #cubic { width: 495px; height: 200px; background-color: green; text-align: center} #span1 {text-align: right; color: red} </style> </head> <body> <p id="cubic"> <span id="span1">This is span 1</span> </p> </body> </html>
+2
source share
3 answers

Right; inline elements cannot have a set of text alignment unless they are set to display a block.

A simple example:

 <html> <style> #spanInline {text-align:right;} #spanBlock {text-align:right;display:block;} #divBlock {text-align:right;} #divInline {text-align:right;display:inline;} </style> <body> <span id="spanInline">asdf</span><br /> <span id="spanBlock">asdf</span><br /> <div id="divBlock">asdf</div><br /> <div id="divInline">asdf</div><br /> </body> </html>

If you create borders around elements, you will see more information about why this does not work.

+3
source

Actually, text-align applies only to block elements, and span is not a block element. Please try the following code:

 <p id="cubic"> <div id="span1">This is div 1</div> </p>

and check if it suits your needs.

+2
source

Initially, this problem and a faster fix is ​​to use the built-in block:

#span1 { display: inline-block; text-align: right; color: red}

It is not good to set your spacing for a simple block element, because block elements will add line breaks before and after the element. If you have gaps within a paragraph, it will completely break the paragraph.

0
source

Source: https://habr.com/ru/post/1233994/

More articles:


All Articles