CSS学习笔记04-垂直居中-内容居中-单行.html

最新推荐文章于 2024-07-24 13:45:34 发布

黑猴子csd

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量506

点赞数

分类专栏： WEB前端CSS 文章标签： css html 布局

本文链接：https://blog.csdn.net/u012579604/article/details/40246091

版权

WEB前端CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>


<html>
<head>
<meta charset="utf-8" />
<title></title>

<style type="text/css">
*{margin:0px;padding:0pxs;}
body{text-align:center;}

</style>
</head>
<body>


<div style="
border: 1px solid rgb(150,10,2);
line-height:200px;
height:200px;
/*当line-height与height属性值相等时：内容在该块中垂直居中*/
over-flow:hidden;
">
<p>一行：this is a line content! </p>
<p>二行：this is a line content! </p>
</div>

<div style="
border: 1px solid rgb(150,10,2);
heigit:50px;
background-color:rgb(128,128,128);
margin-top:10px;
--普通对比块
">
当line-height：大于height：时
查看对其它块元素的影响。
该元素与上一个块元素紧紧挨在了一起，可见：
line-height属性的设置，不会影响同一个层面中其它块元素的所在位置。
</div>

</body>
</html>

黑猴子csd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记04-垂直居中-内容居中-单行.html

作者：1357751126@qq.com时间：2014-09-19描述：>>>>#.X{height: ;line-height: ;over-flow: hidden;}-->*{margin:0px;padding:0pxs;}body{text-align:center;}单行内容居中
复制链接

扫一扫

专栏目录