#display: block;
# margin: 0 auto;
文字:
颜色、字体大小、字体、加粗
文本
行高、对齐方式、文本装饰
text-align:left|right|center|justify 该属性对块级元素设置有效
p标签是快转元素
img不是块状元素
span是行内元素
设置元素内容的垂直方式:对行内元素生效,对块状元素是不生效的
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom
长度|百分比
文字居中:
单行文字居中
多行文字垂直居中(都是在一定范围内)
多行文字居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding:0px; margin:0px;}
.wrap{
height: 400px;
width: 100%;
border:1px blue solid;
display: table;
}
.content{ vertical-align:middle;
display: table-cell;
text-align:center;}/* 该属性对行内元素,还有单元格元素起作用 重点*/
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<h1>Welcome to 上海</h1>
<h2>CSS层叠样式表</h2>
</div>
</div>
</body>
</html>
网友评论