前端基础学习笔记图片、元素、行内块的居中对齐

最新推荐文章于 2024-05-02 14:20:31 发布

BBBMouse

最新推荐文章于 2024-05-02 14:20:31 发布

阅读量540

点赞数 1

分类专栏：前端基础学习笔记-CSS 前端基础学习笔记-CSS 文章标签：前端居中对齐 css

本文链接：https://blog.csdn.net/weixin_41732430/article/details/84432278

版权

前端基础学习笔记-CSS 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

前端基础学习笔记-CSS

18 篇文章 0 订阅

订阅专栏

图片对齐

首先看文本居中方式：

上下居中：给文字一个line-height,最好和文字盒子大小相同。

左右居中：给文字一个text-align:center;

考虑到文字与图片对齐用到基线对齐，所以图片在盒子里居中的方式为：

text-align和line-height放在父级元素里，在img标签里放与行内元素基线对齐。

div{
    width:200px;
    height:200px;
    text-align:center;
    line-height:200px;
}
img{
    width:100px;
    vertical-align:middle;
}

<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
</body>

元素对齐

元素在父元素里的居中方式：和图片类似，加一个inline-block，把其变成行内元素。


div{
    width:200px;
    height:200px;
    text-align:center;
    line-height:200px;
}
p{
    display:inline-block;
    width:100px;
    height:100px;
    width:100px;
    vertical-align:middle;
}

<body>
    <div>
        <p></p>
    </div>
</body>

利用display进行行内块元素的上下左右居中

把父级元素变成单元格，然后再用vertical-middle


div{
    display:table-cell;
    width:200px;
    height:200px;
    text-align:center;
    vertical-align:middle;
}
p{
    display:inline-block;
    width:100px;
    height:100px;
}

利用display多行文字的上下居中


div{
    display:table;
    width:200px;
    height:200px;
}
p{
    display:table-cell;
    width:100px;
    height:100px;
    vertical-align:middle;
}