两端对齐在导航 nav 的制作中非常常用, 那么如何实现两端对齐效果? 下面本篇文章就来给大家介绍一下使用 CSS 实现文字两端对齐效果的方法, 希望对大家有所帮助.
想要实现文字两端对齐效果, 可以使用 CSS 的 text-align 属性. 设置 text-align: justify; 即可实现文字两端对齐效果.
CSS 的 text-align 属性指定元素中的文本的水平对齐方式; 属性值设置为 justify 即可实现两端对齐文本效果.
说明:
值 justify 可以使文本的两端都对齐. 在两端对齐文本中, 文本行的左右两端都放在父元素的内边界上. 然后, 调整单词和字母间的间隔, 使各行的长度恰好相等.
注: 给文字本身元素添加 text-align: justify; 代码并不能达到我们想要的效果, 还需要给元素的父元素添加以下声明
- text-align: justify;
- text-align-last: justify;
- text-justify: inter-ideograph;
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 文字两端对齐
- </title>
- <style>
- .box{ width: 350px; height: 100px; margin: auto; text-align: justify;
- text-align-last: justify; text-justify: inter-ideograph;/* 兼容 IE*/ } .box
- p{ width: 300px; height: 20px; border:1px solid black ; text-align: justify;
- font-size: 16px; }
- </style>
- </head>
- <body>
- <div class="box">
- <p>
- 大家好, 今天天气不错
- </p>
- <p>
- 大家好
- </p>
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10499.html