CSS之布局初探

  1. 左右布局
    1.1 float + margin


    2920775-33dbf55eb65b93ea.png

    1.2 绝对定位


    2920775-032d5e70fd90a78f.png
  2. 左中右布局
    1.1 float + margin


    2920775-495d2235919b9f78.png

1.2 绝对定位


2920775-5c42df33ae3f2264.png

1.3 display table


2920775-21f9d3203372d89f.png
  1. 水平居中
    3.1 行内元素水平居中
    在父级元素上添加
text-align: center;
2920775-c0fa5c7313bc6fad.png

3.2 block元素水平居中

 margin: auto;
2920775-6a545668411d8020.png
  1. 垂直居中
    4.1 行内元素水平居中
    通过display: tablevertical-align: middle 实现
    2920775-2ae2ca3a16eea43b.png

CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

4.2 block元素水平居中


2920775-f9b146da6c9cd715.png

猜你喜欢

转载自blog.csdn.net/weixin_34183910/article/details/87147419
今日推荐