居中内容的文字左、右对齐

Tuesday, July 28, 2009 吉光片羽 0

这种情况可能很少出现，但不免设计师会用到，而前端如何实现呢？当然，方法是有很多种的！理所当然，大家会想到利用内外间距，即margin和padding两个属性。而今天要说到的是另一个简单的方法，或者说，可能很少被人注意并应用到的方法。

text-indent:inherit

inherit可为正负数值。在做背景图片替换文字的时候经常会用到这个属性。同时可以为文本设置默认首行空格。

那么回到正题，当两行文本居中时，如何让第二行与第一行左或者右对齐呢？以第一行为参照，目测出第二行的两端与第一行两端的间距，设置数值，负则向左右则向右偏移，直到对齐位置就OK了。实际效果，有朋友可能已经发现本站的尾注就有。或者可以通过运行下面的代码来看实际情况。这里为了方便CSS，利用了h1-h6标签，免去了选择器的添加。

HTML :\ Ctrl+A 全部选择提示：你可先修改部分代码，再按运行运行此代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>居中内容的文字左、右对齐</title> <style type="text/css"> body{text-align:center;font:100% Arial} p{font-weight:bold;padding:0 0 0 20%;color:#F60;text-align:left} h4{text-indent:26px} h6{text-indent:-42px} div h2{padding:0 0 0 137px} </style> </head> <body> <p>普通居中</p> <h1>H1H1H1H1H1H1H1H1H1H1H1H1H1H1</h1> <h2>H2H2H2H2H2H2H2H2H2H2H2H2H2H2</h2> <p>居中右对齐</p> <h3>H3H3H3H3H3H3H3H3H3H3H3H3H3H3</h3> <h4>H4H4H4H4H4H4H4H4H4H4H4H4H4H4</h4> <p>居中左对齐</p> <h5>H5H5H5H5H5H5H5H5H5H5H5H5H5H5</h5> <h6>H6H6H6H6H6H6H6H6H6H6H6H6H6H6<br />H6H6H6H6H6H6H6H6H6H6<br />H6H6H6H6H6H6</h6> <p>通过padding实现的居中右对齐</p> <div> <h1>H1H1H1H1H1H1H1H1H1H1H1H1H1H1</h1> <h2>H2H2H2H2H2H2H2H2H2H2H2H2H2H2</h2> </div> <div>© <a href="http://www.jgpy.cn">吉光片羽</a>出品</div> </body> </html>

从示例中可以看到，使用text-indent属性和使用padding是一样的，不过其中的H6为多行文字，由于text-indent只对首行起作用，因而第二行以后还是继承了父级的居中属性。由此看来，text-indent只支持两行的文字居中并左、右对齐。

在此只是提供另一种解决方法的思路，目前看来并不能给解决问题带来多大优势。大家有什么看法，欢迎评论讨论！

© 版权声明：

本文为吉光片羽原创，遵循知识共享许可协议，转载（全文或部分文字）请务必注明作者：吉光片羽，及本文地址。谢谢合作！
文中所引用的部分图片或文字等资源版权归原作者所有，如果侵犯了您的权益，请在下方评论提出，我会尽快处理。

★吉光片羽是壹穜風格★

Web Front-end Developer & Freelance Designer