css将文字和图片水平垂直居中

最新推荐文章于 2023-02-02 11:16:18 发布

啊哈前端

最新推荐文章于 2023-02-02 11:16:18 发布

阅读量1.7k

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/49663945

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css将内容水平垂直居中</title>
<style type="text/css">
    *{margin:0;padding:0;box-sizing:border-box;font: 16px/20px 'Microsoft yahei,微软雅黑'}/*box-sizing:border-box设置元素的宽度包含padding和border*/
    .all {
        width: 500px;
        margin: 0 auto;
    }
    .container {
        width: 300px;
        height: 600px;
        min-height: 6.5em;/*em是相对于字体来计算的，这里1em=16px,6.5em=6.5*16px=104px*/
        display: table-cell;
        vertical-align: middle;
        border: 1px solid springgreen;
        text-align: center;
    }
</style>
</head>
<body>
<div class="all">
<div class="container">
    66666666666677777<br>
    66666666666666666<br>
    88888888888888888<br>
    99999999999999999<br>
    10101010101010101<br>
    21212121212121212<br>
</div>
<div class="container">
    <img src="http://img0.bdstatic.com/img/image/2043d07892fc42f2350bebb36c4b72ce1409212020.jpg" width="250px" height="350px">
</div>
</div>
</body>
</html>

啊哈前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css将文字和图片水平垂直居中

html>html lang="en">head> meta charset="UTF-8"> title>css将内容水平垂直居中title>style type="text/css"> *{margin:0;padding:0;box-sizing:border-box;font: 16px/20px 'Microsoft yahei,微软雅黑'}/*box-si
复制链接

扫一扫