首先，让我们看看HTMLspan属性是如何居中的。

事实上，有许多方法可以使文本居中。有一种简单的方法可以将下面一行代码插入到代码中：

style=' text-align : center；'行高：18 px；'

水平居中文本对齐：居中；

设置行高line-height :18 px；使用与跨度相同的高度，文本可以垂直居中(只有一行文本)。

水平居中很简单，只需设置文字-align :居中，垂直居中总是未知！

在过去，我总是试图调整垫高，但有时它起作用，但更多的时候它不起作用。今天在高度值不大的情况下，加垫顶会增加整个DIV或者SPAN的高度。

我在想，理论上垂直对齐的默认值应该是基线，而不是顶部对齐。突然想起字体有行高属性，所以很明显它的默认值高达一个字，于是我把行高值改成和DIV或者SPAN的高度一样！

这样，DIV和SPAN中的文本将垂直居中对齐。

请看一个span标签的例子：

风格

div { text-align : center；}

divdd，divddt { text-align : left；}

/style

差异

分升

dd111/dd

dt 1111111111111111/dt

dd222/dd

dt 2222222222222222222/dt

/dl

Spanahref='www.php.cn '水平居中/a/span

/div

这样span标签的内容就会显示在页面的中央，效果如图：

tuyi.png

下一个要解决的问题是如何右对齐。

做网站的时候我们经常给div，li和span加上span右对齐。例如，在文章列表中，我们将添加时间来调整它，以提高网页的可读性，如下所示：

Html如下：

ulclass='news '

Lispan右对齐，换行显示解决方案span2010-8-26/span/li

/ul

css:news ulli span { float : right；}

然而，问题又来了。当我们给一个块添加跨度时，我们会发现在网页中预览时跨度线是右对齐的。那么为什么呢？

事实证明，当非浮动元素和浮动元素在一起时，如果非浮动元素先出现，浮动元素将被排除。因此，即使span是float:right，文本显示也是float:none，所以span将被拒绝。

htmlspan标签无换行右对齐的两种解决方案；

首先，跨度显示在文本之前

ulclass='news '

Li span 2010-8-26/span右对齐和换行显示的解决方案/li

/ul

其次，让文本浮动

ulclass='news '

Li span class=' fl右对齐和新线条显示的解决方案span class=' fr ' 2010-8-26/span/Li

/ul。fl { float:left}。fr { float:right}

第二种方法没有种简单。为了网页代码的简单，推荐种方法。

好了，以上是关于HTMLspan标签的居中和右对齐。希望对你有帮助。有什么问题可以在下面问。

本文转载自中文网站