HTML与CSS--------居中问题

来源：互联网发布：java spring 异步调用编辑：程序博客网时间：2024/06/05 19:20

居中问题

左右居中

 块标签内的内容居中用 text-align:center 块标签自己居中两种方法    1.当块标签给定宽度时 用margin: 0 auto;    2.或者用相对定位:left:50%  margin-left:width/2;

行块标签上下居中
1.表格有默认内容居中的样式
2.用vertical-align:middle;

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            .wrap{                height: 500px;                background-color: lightpink;            }            .wrap span{                display: inline-block;                height: 100%;                vertical-align: middle;            }            .wrap img{                width: 200px;                height: 100px;                vertical-align: middle;            }        </style>    </head>    <body>        <div class="wrap">            <span></span>            <img src="img/tfboys1.jpg"/>        </div>    </body></html>

0 0