css如何让一行内的文字两端对齐?

html-css034

css如何让一行内的文字两端对齐?,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{

border: 1px solid blue

width: 300px

text-align: justify

}

div:after {

display: inline-block

width: 100%

content: ''

}

3、浏览器运行index.html页面,此时一行内的文字实现了两端对齐。

<p></p>代表的是一个段落容器,这个容器的style:

text-align

决定了整个容器里元素的排版方式

vertical-align

属性是设置元素的

垂直对齐

方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

也就是说这两个属性的目标是不一样的,<p></p>以及其他父类容器假如定义了text-align属性,那这些容器内的子元素都按照这个排版方式来进行排版,而vertical-align只是影响设置了这个属性的元素。

其实CSS你要去看具体的属性有什么特性才能了解具体的内容

建议去

http://www.w3school.com.cn/

看看

img是内联元素,p标签是块级元素,所以p标签内的文字换行很正常。strong标签是内联元素,所以会跟img处于同一行,想要img跟strong中的文字垂直居中对齐,需要设置img的vertical-align为middle。