手记

html代码片段

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>对齐方式</title>

    <style type="text/css">

        span{margin: 0;padding: 0;}

        .div1{

            width:100px;

            height: 100px;

            background-color: aqua;

            text-align: center;

        }

        .div1{line-height: 100px;}

        .div2{

            width:100px;

            height:100px;

            background-color:chartreuse;

            text-align: center;

            display: table-cell;

            vertical-align: middle;

        }

        .div3 {

            width: 100px;

            height: 100px;

            background-color: royalblue;

            display:table-cell;

            vertical-align: middle;

        }

        .div3 div {

            width: 50px;

            height: 50px;

            background-color: red;

            margin:auto;


        }

        .div4 {

            width: 200px;

            height: 200px;

            background-color: brown;

            text-align: center;

            display:table-cell;

            vertical-align: bottom;

        }

        ul{padding: 0;margin: 0;}

        .div4 li{list-style: none;

            display: inline;

        }

    </style>

</head>

<body>

<div class="div1"><a href=""> php中文网</a></div>

<div class="div2"><span>php中文网</span><br><span>www.php.cn</span></div><br>

<div class="div3"><div></div></div><hr>

<div class="div4">

    <ul>

        <li><a href="">1</a></li>

        <li><a href="">2</a></li>

        <li><a href="">3</a></li>

        <li><a href="">4</a></li>

        <li><a href="">5</a></li>

    </ul>

</div>

</body>

</html>


0人推荐
随时随地看视频
慕课网APP