利用父元素的子元素水平垂直居中 (margin,position,)以及导航条（列表）的文本文字水平垂直居中（height=line-height）...

最新推荐文章于 2024-07-18 13:52:01 发布

weixin_30768175

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量119

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/SONLY-s/p/7536227.html

版权

利用父元素的子元素水平垂直居中：

　　1.通过设置外边距margin来让子元素在父元素中达到水平垂直居中效果（父元素以及子元素高度宽度确定），例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: blue; margin-left:30px; margin-top:30px;}
        </style>
        
        <div class="div1">
            <div class="div2">
                
            </div>
        </div>
        
    </body>
</html>

对于margin的值，已知父元素的宽和高都是100px,子元素的宽高都是40px;那么margin-left=（父宽-子宽)/2，同理margin-top=(父高-子高)/2，至此就可以让子元素在父元素达到垂直水平居中效果。

　　2.通过设置父元素为position:relative;，子元素为position：absolute;，然后再用子元素相对于父元素的绝对定位（left、right、top、bottom的值来决定定位位置）来达到水平垂直居中效果，当然此方法也需要确定父元素以及子元素的宽高。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000; position:relative;} 
            .div2{ width:40px ; height: 40px; background-color: yellow; position:absolute; left:30px; top:30px;}
        </style>
        
        <div class="div1">
            <div class="div2">
                
            </div>
        </div>
        
    </body>
</html>

left和top的值与方法一可同理求得

导航条（列表，单行文本）的文本文字水平垂直居中（height=line-height）：

（先解释一下height和line-height的区别：

height：指的是一个元素的高度

line-height：指的行内距即行内元素（内联元素）产生的一个行内框（像文本之类自己本身带有的高度，如果没有对line-height进行设置，那么它就是文字font-size的大小，但是如果设置了line-height的值，那么里面的文字是在line-height这个行内框中默认垂直居中的，这个时候让line-height的值与所在的单行高height值相等，就实现了文本文字的垂直居中）

块内布局规则

块内height为auto时，高度为块内行框累加高和其内普通流块高之和
块内height为非auto时，块高为 height 指定高度

块内行框布局（行内布局）规则

每一个行内元素会产生一个行内框；
行内框会在行框内横向排列；
'line-height' 特性值指定了每个行内非替换元素生成的行内框的确切高度；行内替换元素的高度由 'height' 特性值决定；
文字在行内框中垂直排列，上下空隙用半差异填补；如果字号大于行内框则文字从上下方向上溢出行内框，并可能渗入到其他行框内（行框是永远不会重叠的）；
'vertical-align' 特性值指定了每个行内框的垂直对齐方式；
行框的顶边界是这一系列垂直对齐的行内框最高的顶边框，底边界是最低的底边框。
行框的高度是顶边界到底边界的距离。

　　1、通过设置列表的行距line-height=height（列表的高度），例如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    *{margin:0;padding:0;}
    li{
        line-height:30px;
        height:30px;
        width:100px; 
        list-style:none;
        font-size:20px;
        background-color:#F90;
        margin:1px;
        }
    ul{margin:20px;text-align:center;}
</style>
</head>

<body>
<ul>
<li>首&nbsp;&nbsp;页</li>
<li>联系我们</li>
<li>售后服务</li>
<li>合作加盟</li>
</ul>

</body>
</html>

　　例子中先通过文本居中text-align:center;让文本水平居中，再通过设置行距line-height等于高度height（list的高度）来达到垂直居中，以此水平垂直居中就完成了，当然此方法除了可以放在导航页列表外，还可以用在什么地方呢？留给你们思考了，评论留答案（手动滑稽）

　　补充下知识点，一般导航页的选项都会有链接，在这里如果是用<a>作为子元素设置宽高，记得把<a>设置为display:block;才能让内联元素<a>变成块元素可以设置宽高

对于子元素不确定宽高度的水平垂直方法有空再小结啦

有错麻烦帮忙指正哦！

转载于:https://www.cnblogs.com/SONLY-s/p/7536227.html

weixin_30768175

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用父元素的子元素水平垂直居中 (margin,position,)以及导航条（列表）的文本文字水平垂直居中（height=line-height）...

利用父元素的子元素水平垂直居中：　　1.通过设置外边距margin来让子元素在父元素中达到水平垂直居中效果（父元素以及子元素高度宽度确定），例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
复制链接

扫一扫