Shulou(Shulou.com)06/01 Report--

Editor to share with you how the span tags in HTML are centered and aligned to the right, I believe most people don't know much about it, so share this article for your reference. I hope you will get a lot after reading this article, and let's go to know it!

First, let's take a look at how the HTML span attribute is centered?

In fact, there are many ways to center the span text, and an easier way to do this is to insert the following line of code into the code:

Style= "text-align:center;line-height:18px;"

Horizontal centered text-align:center

Set the line height line-height:18px; to be the same as the span height, so the text can be centered vertically (only one line of text).

Horizontal center is very simple, just set text-align:center, but vertical center has always been difficult to understand!

I used to try to adjust padding-top, but sometimes it works, sometimes it doesn't work, and today, when the height value is small, increasing padding-top increases the height of the entire DIV or SPAN.

I was thinking that theoretically the default value of vertical-align should be baseline, not top alignment, when I suddenly remembered that the font has a line-height attribute, so obviously its default value is as high as a word, so change the line-height value to the same as the height of DIV or SPAN!

In this way, the text in DIV and SPAN will be centered vertically.

Look at an example of a span tag:

>

>

> div {text-align:center;}

>

> div dd,div dt {text-align:left;}

>

>

>

>

>

>

>

> 111

>

> 1111111111111111

>

> 222

>

> 222222222222222222

>

>

>

Horizontal center

>

>

In this way, the contents of the span tag will be centered in the middle of the page, as shown in the figure:

The next problem we should solve is how to align to the right?

We often add span right alignment to div,li,span when making a website. For example, we will add time to right alignment in the article list to increase the readability of the page, as shown in the following code:

Html is as follows:

>

>

Solution to span right alignment and line wrapping 2010-8-26

>

>

Css:.news ul li span {float:right;}

But here comes the problem again. Often when we add span to a block, we will find that the span line breaks are aligned to the right when previewed in the web page, so why?

It turns out that when non-float elements and float elements are together, if non-float elements come first, then float elements will be excluded, so even if span is float:right, the text display is float:none, so span will be excluded.

Two solutions for right-aligning html span tags without line wrapping:

First, display the span before the text

>

>

> 2010-8-the solution to 26span right alignment and line break display

>

>

Second, let the text float:left

>

>

Solution to span right alignment and line wrapping 2010-8-26

>

>

>

> .fl {float:left;}

>

> .fr {float:right;}

The second method is not as simple as the first method. For the sake of the simplicity of the web code, the first method is recommended.

The above is all the content of the article "how to center and right align the span tags in HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.