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

快来打我* 2022-04-14 04:17 198阅读 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;
    }

## 元素对齐 ##

元素在父元素里的居中方式：和图片类似，加一个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;
    }

### 利用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;
    }