目录

8.9、段落排版--对齐text-align

2017年08月31日 08:19 | 2481次浏览 作者原创 版权保护

想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。(那么什么是块状元素呢?在后面的11-1、11-2小节中会讲到。)

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

同样可以设置居左:

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

还可以设置居右:

h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>


练习

新建示例页面demo.html,示例代码如下

我也来试试,为图片设置水平居中显示

1.在示例页面代码中的第7行,输入下面代码:

div{text-align:center;}


示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐</title>
<style type="text/css">

</style>
</head>
<body>
<div><img src="https://www.vxzsk.com/upload/201707/517e8d3d-4c54-4f55-b223-f7a09c08410620170721.jpg" ></div>
</body>
</html>


总结

font-style:italic斜体

text-decoration:underline下划线

text-decoration:line-through删除线

text-indent:2em缩进

line-height:1.5em行间距(行高)

letter-spacing:50px 文字间隔,word-spacing 英文单词间距(对中文无效)

text-align:center  段落排版对齐方式left,right  

display:将元素变为块级元素,如2个span会换行


小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/1359.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程