字体样式

2019-05-17  本文已影响0人  三人行大道
 #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>











上一篇下一篇

猜你喜欢

热点阅读