当前位置:网站首页 / web前端 / 正文

AY H5笔记11-垂直居中

时间:2020年10月09日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 30次 | 评论 0

插一个上节课的vertical-alignment:middle无效的问题

比如设置,水平居中有效

    <div style="background-color: pink; text-align: center;">
        ay博客
    </div>

image.png

继续设置,vertical-align:middle是无效的

    <div style="background-color: pink; text-align: center;vertical-align: middle;">
        ay博客
    </div>

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。


如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。

定义个样式

 .div1 {
            border: 1px solid #000;
            height: 20px;
            width: 20px;
        }

代码

    <div style="border: 0 solid #000;">
        <div class="div1" style="display: inline-block;vertical-align: middle;">a</div>
        <div class="div1" style="display: inline-block;">b<div>
    </div>

刪除下面的一些div代码,后效果如下

当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置

image.png


调整代码,让div的高度明显点,把div1的height设置60,然后a和b都加了一个vertical-align:middle样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            height: 100px;
            width: 600px;
        }

        .div1 {
            height: 60px;
            width: 20px;
        }

    </style>

<body>
    <div style="background-color: pink; text-align: center;vertical-align: middle;">
        ay博客
    </div>
    <div style="background: yellow;">
        <div class="div1" style="display: inline-block;vertical-align: middle;background: green;">a</div>
        <div class="div1" style="display: inline-block;vertical-align: middle;background: yellowgreen;">b<div>
  
    </div>
</body>

</html>

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========



那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

image.png

两个绿色方块并不在黄色方块内垂直居中

我们先垂直居中a,注释掉b

增加一个辅助空div

      .divhelp {
            height: 100%;
            width: 0;
            display: inline-block;
            vertical-align: middle;
        }

image.pngimage.png

已经居中了

因为有个100%高度的div,其他div以100%的div为基线,全都居中


修改下写法

     .parent::after {
            height: 100%;
            content: '';
            display: inline-block;
            vertical-align: middle;
            overflow:hidden;
        }
 <div class="parent" style="background: yellow;">
        <div class="div1" style="display: inline-block;vertical-align: middle;background: green;">a</div>
        <!-- <div class="div1" style="display: inline-block;vertical-align: middle;background: yellowgreen;">b<div> -->
    </div>

效果图同上。


如何让内部也垂直居中,把需要居中的父元素设置这个样式

image.png

image.png

内部文字水平居中,绿色方块水平居中

image.png

image.png

父元素使用line-height等于height,子元素能垂直居中了。但是里面的内容

    <div style="height: 120px;line-height: 120px;background-color: teal;">
        <div style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);">
    b
        </div>
    </div>

image.png

文字貌似跑出去了    ,只要里面的内容也设置line-height等于height


image.png

也居中了

image.png



绝对对齐居中写法,适合登录页

        .v3 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

居中后,内部垂直居中

    <div class="v3 parent" style="width:100px;height:60px;background: rgb(102, 212, 102);text-align: center">
        b
    </div>

image.png




使用table-cell方式

    <table style="width: 300px;height: 120px;background: rgb(209, 144, 206);">
        <tr>
            <td style="vertical-align: middle;text-align: center">
                <div class="parent" style="width:140px;height:60px;background: rgb(102, 128, 212);">
                    www.ayjs.net
                </div>
            </td>
        </tr>
    </table>

image.png

发现td的text-align: center无效,因为 该属性对block无效

image.png

设置显示方式,然后成功

image.png



display: inline-block

inline-block元素把自己变成特殊的inline元素,对于相邻的元素来说表现出inline的特点,允许空格。对于内部元素来说表现出block元素的特点,可以设置高度和宽度。

空格是两个标签中存在换行符or制表符or空格符(其实就是缩进)的原因生产的,只需要给设置了inline-block属性的父元素设置font-size:0,就可以使标签中的空格失去宽度




同理我们知道了table-cell的特殊性,他对浮动元素无效

未生效的样子

    <div style="height: 120px;background-color: teal;">
        <div
            style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);">
            tablecell方式
        </div>
    </div>

image.png

    <div style="width:200px;height: 120px;background-color: teal;display:table-cell; vertical-align: middle;text-align: center;">
        <div
            style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);display:table-cell; text-align: center;"  >
            tablecell方式
        </div>
    </div>

你也发现了,无法水平居中

image.png

对于父元素和子元素的宽度都确定的情况,适合通过display:table-cell和margin-left实现CSS水平居中。

使用时,父元素display:table-cell,子元素给剩余宽度一半的margin-left。

(200-100)/2 =50


继续修改:

    <div style="width:200px;height: 120px;background-color: teal;display:table-cell; vertical-align: middle;">
        <div
            style="width:100px;height:60px;vertical-align: middle;background: rgb(102, 212, 102);margin-left: 50px;"  >
            tablecell方式
        </div>
    </div>

image.png


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表