【CSS】两端对齐

最新推荐文章于 2024-02-03 11:11:40 发布

yongh701

最新推荐文章于 2024-02-03 11:11:40 发布

阅读量2k

点赞数 1

分类专栏： HTML&CSS 文章标签： css 两端对齐 html ie6 前端

本文链接：https://blog.csdn.net/yongh701/article/details/54889623

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

这本来是个在word里面才有的概念，但人家就是要我们程序猿在网页中实现。

在一般情况下，比如如下的代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> 
<body>
    <div style="width:200px;border:1px #000000 solid; ">
        ＆emsp;＆emsp;To justify the text in a cell, text box, or button, use the Justify Align button.<br>
        ＆emsp;＆emsp;要将单元格或文字框中的数据靠两端对齐，单击两端对齐按钮。（两端对齐指：设置文本内容两端，调整文字的水平间距，使其均匀分布在左右页边距之间。）
    </div>
</body>
</html>

在各个浏览器的效果是这样的：

本来也没什么的，再正常不过的事情的，但人家就是看不惯，说，为何右端对齐问题总觉得问题。需要你修改修改。

他们主要就是认为这个div右端的对齐，部分单词留空太多，不好看。意思就是要做到word的两端对齐那个意思。

幸好实现起来不难，你只是需要加上text-align:justify和text-justify:inter-ideograph两句，分别保证英文和中文的两端对齐，上述代码修改如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head> 
<body>
    <div style="width:200px;border:1px #000000 solid;text-align:justify;text-justify:inter-ideograph">
        ＆emsp;＆emsp;To justify the text in a cell, text box, or button, use the Justify Align button.<br>
        ＆emsp;＆emsp;要将单元格或文字框中的数据靠两端对齐，单击两端对齐按钮。（两端对齐指：设置文本内容两端，调整文字的水平间距，使其均匀分布在左右页边距之间。）
    </div>
</body>
</html>

当然你也可以在你的.css样式你改，这本身就是就CSS样式的一部分，同时这是兼容所有浏览器的，亲测：