css设置图标居左_「css图片居中」css - 常用垂直/水平居中 + 左右布局 - seo实验室...

最新推荐文章于 2022-03-30 13:54:25 发布

暗香无名

最新推荐文章于 2022-03-30 13:54:25 发布

阅读量332

点赞数

文章标签： css设置图标居左

本文链接：https://blog.csdn.net/weixin_42356137/article/details/111969355

版权

本文介绍了多种CSS布局方法，包括图片居中、元素垂直水平居中以及左右布局的实现。重点讲解了如何使用display: table-cell、定位和transform属性实现未知高度的垂直居中，以及利用BFC特性、浮动和绝对定位实现两列布局。同时，还探讨了CSS在等高布局中的应用。

摘要由CSDN通过智能技术生成

css图片居中

主要内容

学习文献

元素居中

胡子哥 — 谈一谈我在阿里的成长 + 2

左右布局

几种常见的CSS布局 —— 掘金

BFC

实现三栏布局的几种方法—— github

实现多列等高布局

—

水平垂直居中，面试必考题 - 颜海镜 —— 小志-span标签居中兼容好

前端周刊-博主+ CSS学习笔记+小志面试2

腾讯白树的两端对齐方法

摘自颜海镜的博客：

参考文献：最全面的水平垂直居中方案与flexbox布局1、纯css未知高度图片垂直居中：

父元素设置 display: table-cell;这个时候元素的父元素就相当于变成了表格的单元格，再这个单元格设置vertical-align:middle;即可实现内容垂直居中；这种方法的优点在于对低版本的浏览器兼容性很好，可以放心使用；

css:

.box {

//非IE的主流浏览器识别的垂直居中的方法

display: table-cell;

vertical-align:middle;

text-align: center;

width: 200px;

height: 200px;

border: 1px solid #eee;

}

.box .img {

//设置图片垂直居中

vertical-align: middle;

}

2、利用定位和位移 transform: translate(x , y); 在未知宽高的情况下：

给要居中的子元素设置绝对定位 position: absolute;

而元素的父级添加相对定位 position: relative; 限制绝对定位元素在其盒子内部；/* 代码：*/

.box {

width: 100%;

height: 100%;

position: relative;

}

.box .img {

position: absolute;

top: 50%;

left: 50%;

width: 100px;

height: 100px;

transform: translate(-50%, -50%);

}

当父元素是长方形的宽度时，.img可以用 width: 100%;

当父元素是正方形的宽度时，.img可以用 height: 100%;

适合未知宽高的情况下，元素水平垂直居中；

布局篇：

flex左右布局可以参考WEUI组件的写法；地址：weui组件

1、固定宽高左浮动，右侧自适应.wrap {

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

width: 200px;

height: 300px;

float: left;

background: #ccc;

}

.right {

height: 100%;

margin-left: 200px;

background: #ddd;

}

.clearfix {

zoom: 1;

}

.clearfix:after {

content: '.';

display: block;

height: 0;

clear: both;

overflow: hidden;

visibility: hidden;

}

2、绝对定位+外边距.wrap {

position: relative;

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 300px;

background: #ccc;

}

.right {

height: 100%;

margin-left: 200px;

background: #ddd;

}

3、利用BFC特性：.wrap {

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

width: 200px;

height: 300px;

float: left;

background: #ccc;

}

.right {

height: 100%;

overflow: hidden;

background: #ddd;

}

在给第二个子元素设置了overflow:hidden ，它就生成了一个BFC块；

BFC其中的一个布局规则就是不会和float box 发生重叠，于是就和第一个浮动了的子元素隔开了；

也可以利用flex进行两列等高布局，不过要考虑到其兼容问题；1、display: table-cell 实现多列等高布局:

将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格;.wrap {

display: table;

overflow: hidden;

}

.left {

display: table-cell;

width: 200px;

background: #4caf50;

}

.right {

display: table-cell;

width: 800px;

background: #99afe0;

}

2、padding + margin + overflow，实现多列等高效果，兼容性好

.wrap {

position: relative;

overflow: hidden;

}

.left {

float: left;

width: 200px;

padding-bottom: 9999px;

margin-bottom: -9999px;

background: #4caf50;

/* 可以做到左侧固定宽度，右侧宽度响应式效果

position: absolute;

}

.right {

float: left;

width: 800px;

padding-bottom: 9999px;

margin-bottom: -9999px;

background: #99afe0;

width: 100%;

margin-left: 200px;

}

css设置图标居左_「css图片居中」css - 常用 垂直/水平居中 + 左右布局 - seo实验室...

css设置图标居左_「css图片居中」css - 常用垂直/水平居中 + 左右布局 - seo实验室...