垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

superman__007

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量454

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/superman__007/article/details/78019417

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

1、垂直居中分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。

1.1 父元素高度确定的单行文本。给父元素的line-height和height一样就可以垂直居中，line-height就是行与行基线之间的距离。如：

.wrap h2{
    margin:0;
    height:100px;
    line-height: 100px;
    background:#ccc;
    text-align: center;
}
</style>
</head>

<body>

<!--文字垂直居中，文字的父元素是H2-->
<div class="wrap">
    <h2>hi,imooc!</h2>
</div>
</body>

1.2、父元素高度确定的多行文本。第一种方式是设置table标签，另外一种方式是使用vertical-align:center和display:table-cell来实现垂直居中

<style>
  .wrap{height:300px;background:#ccc}
  .girl{vertical-align: middle; height: 400px; background : #eee; width: 400px; display: table-cell; text-align:center;}
</style>
</head>

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

<div class="girl">
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>

另外还有一个隐形的display属性，当元素被 position : absolute 或者 float : left 或 float:right修饰时，不管这个元素以前是块级元素还是行级元素此时都变成了内联块级元素（ display:inline-block）了，都可以设置高度和宽度。

superman__007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
垂直居中

1、垂直居中分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。1.1 父元素高度确定的单行文本。给父元素的line-height和height一样就可以垂直居中，line-height就是行与行基线之间的距离。如：.wrap h2{ margin:0; height:100px; line-height: 100px; background:#c
复制链接

扫一扫