How to center and right align HTML span tag? Here is the style analysis of HTML span tags

This article mainly talks about how to center and right-align the text of the span tag in HTML. There are also various examples here. Let us take a look at 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. Here is an easier way to do it, which is to insert the following line of code into the code:

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

Horizontally centered text-align:center;

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

Horizontal centering is very simple, just set text-align:center, but vertical centering has always been puzzling!

I always tried to adjust padding-top before, but sometimes it worked, and most of the time it didn’t work. Same today, when the height value is not large, increasing padding-top will increase the entire DIV or SPAN height.

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

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

Let’s look at an example of a span tag:

<style>
div {text-align:center;}
div dd,div dt {text-align:left;}
</style>
<div>
<dl>
<dd>111</dd>
<dt>11111111111111</dt>
<dd>222</dd>
<dt>222222222222222</dt>
</dl>
<span><a href="www.php.cn">水平居中</a></span>
</div>

In this way, the content in the span tag will be displayed in the center of the page. The effect is as shown below:

The next problem we need to solve is how to right align?

When we make websites, we often add span right alignment to div, li, and span. For example: in the article list, we will add time to make it right-aligned to increase the readability of the web page. , the following code:

html is as follows:

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

css：.news ul li span{float:right;}

But the problem comes again, often we are in a block When you add span to the web page, you will find that the span is right-aligned when previewing on the web page. So why is this?

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

html Two solutions for right-aligning the span tag without wrapping:

1. Display the span before the text

<ul class="news">
    <li><span>2010-8-26</span>span右对齐,换行显示的解决方法</li>
</ul>

2. Let the text float:left

<ul class="news">
<li><span class="fl">span右对齐,换行显示的解决方法<span><span class="fr">2010-8-26</span></li>
</ul>
.fl {float:left;}
.fr{float:right;}

The second method is not as simple as the first method. For the simplicity of the web page code, it is recommended to use the first method.

Okay, the above is about the methods of centering and right-aligning HTML span tags. I hope it will be helpful to you. If you have any questions, you can ask below

[Editor’s recommendation]

How to write a relative path to the base tag in HTML? (Introduction to use included)

#What is the role of the HTML meta tag? Introduction to the use of html meta tags

The above is the detailed content of How to center and right align HTML span tag? Here is the style analysis of HTML span tags. For more information, please follow other related articles on the PHP Chinese website!