css实现文字两端对齐

html-css020

css实现文字两端对齐,第1张

但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在StackOverflow上找到解决方法了。

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

但是加入HTML元素又违反了结构表现分离的原则，我们可以改用after、before伪元素：

参考资料： css实现文字两端对齐

文字对齐用：text-align，以下是text-align属性的值与描述，希望对你有所帮助；

left：

把文本排列到左边。默认值：由浏览器决定。

right“把文本排列到右边。

center：把文本排列到中间。

justify：实现两端对齐文本效果。

inherit：规定应该从父元素继承 text-align 属性的值。

、在div中，使用p标签创建一行文字，使用img创建一张图片。

2、设置div标签的class属性为mydiv。

3、在css标签内，通过class设置div的样式，设置它的宽度为400px，边框为1px，并将display属性设置为flex，实现flex布局。

4、在css标签内，将align-items属性设置为center(水平居中)，将justify-content属性设置为space-between（两端对齐）。

5、在浏览器打开test.html文件，查看实现的效果。