最近上公开课，讲到css的两端对齐，准备写一下心得记录一下。
css两端对齐的两种方式:(原文参见白树大神）
http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo
方法一：使用text-align:justify
先看代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两端对齐</title>
</head>
<body>
<div class="demo">
<a class="link" href="#">1</a>
<a class="link" href="#">2</a>
<a class="link" href="#">3</a>
<a class="link" href="#">4</a>
<a class="link" href="#">5</a>
<a class="link" href="#">6</a>
<a class="link" href="#">7</a>
</div>
</body>
css
<style type="text/css">
*{margin:0;padding:0;}
.demo{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
}
.demo:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
.demo a{
width:5%;
display:inline-block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
}
</style>
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
然而，尝试之后发现，设置text-align:justify后并没有实现两端对齐的效果。百度之后发现，text-align非常之傲娇，因为它
一行文本不进行处理，还有就是强制换行的也不处理。不会处理被打断的行和最后一行。
那么，1.使用text-align-last，然而这个只有IE支持。(火狐为-moz-text-align-last)
2.使用:after选择器，生成空内容块级元素宽度为100%的一行。于是便有了上面的代码。[align=center][/align]
方法二：使用justify-content:space-between
设置为盒模型，设置justify-content为space-between
.demo{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
分享到：
相关推荐
3. **CSS样式**：为了使文字两端对齐生效，我们需要在ECharts的`grid`或者`textStyle`中添加对应的CSS样式。注意，由于ECharts的标签是内联元素，因此`text-align: justify;`可能无法直接应用。可以使用以下技巧实现...
div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法： html结构 实现demo里面的div通过Css进行2端对齐。 <div>1 <div>2 <div>3 1.margin负值的方式 该方法需要...
本文将深入探讨如何使用CSS实现文本的两端对齐，特别是在处理中文文本时的挑战。 首先，`text-align` 属性是实现文本对齐的基础，它允许你控制元素内部的文本水平对齐方式。当设置为 `justify` 时，`text-align` 会...
CSS（层叠样式表）提供了多种方法来实现元素的右对齐，下面我们将详细探讨这些方法。 1. **浮动**： 浮动是CSS中一种早期的布局方式，通常用于创建多列布局。在标题中提到的代码片段中，`#tabsF ul` 使用了 `float...
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
对于 Chrome，还需要考虑 `-webkit-text-align-last` 属性，以及使用伪元素和特定 CSS 规则来模拟两端对齐的效果。 以下是一个在不同浏览器中实现文本两端对齐的 CSS 示例： ```css .test1 { text-align: justify...
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是...
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码： <!DOCTYPE ...
"css左右居中对齐"是一个常见的需求，尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中对齐，并结合`test.html`文件中的示例进行说明。 首先，我们要理解CSS中的几种主要布局...
用CSS控制中英文字符强制换行并两端对齐，有效避免DIV的内容超出范围而改变网页布局，强制换行的功能很实用。 复制代码代码如下:<html><head><title>CSS强制换行对齐</title></head>&...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
在网页设计中，为了美观和专业，英文文本的排版往往需要实现两端对齐和智能断行，这就需要用到`HyphenJS`。`HyphenJS`是一个JavaScript库，专门用于处理西文（如英文）的自动断行和连字符插入，以达到齐头尾的对齐...
在CSS中，对图片的对齐分为横向对齐和纵向对齐两种方式。 1. **设置图片的横向对齐** - 横向对齐是基于水平方向的调整，与文本对齐方式类似，包括左对齐、居中对齐和右对齐。 - CSS中，由于`<img>`标签本身不包含...
justify：两端对齐，均匀分布 list-style-type： none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02...
SWF文件常用于在线播放多媒体内容，用户可以通过这种文件学习如何在CSS中设置文本对齐方式，如左对齐、右对齐、居中和两端对齐等。 2. "下载说明.txt"：这是一个文本文件，通常包含有关如何正确下载、解压和访问教程...
文字要包含在label标签中，并设置行高，否则文字会与文本框的顶 端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中，要设置高和行高，行高要小于高。 对input标记设定...
`left`值会将文本对齐到块级元素的左侧，`right`值则对齐到右侧，`center`值会居中对齐文本，而`justify`值则使文本两端对齐。两端对齐的文本意味着行的左右两端都对齐到容器的边缘，通常用于报纸杂志的排版效果。在...
最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺...这篇文章就给大家分享了text-algin:justify实现文本两端对齐的方法。