布局总结-水平居中布局的实现
CSS布局
一、左右布局
1、float实现左右布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index01.css">
<title>居中布局的几个实现方案</title>
</head>
<body>
<div class="left"></div>
<div class="right">DEMO</div>
</body>
</html>
标签结构很简单,就是一个父元素里面套了一个子元素
想要实现左右布局,只需要把<div class="left"></div>
设置成向左浮动,右边向右浮动
.left{
float: left;
}
.right{
float: right;
}
或者把left和right设置成inline-block
.left{
display: inline-block
}
.right{
display: inline-block
}
二、居中布局
1、html
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index01.css">
<title>居中布局的几个实现方案</title>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
标签结构很简单,就是一个父元素里面套了一个子元素
2.用text-align
和inline-block
实现
- 首先
text-align
只针对inline
元素有效,因此,可以在父元素设置text-align:center
,然后改变子元素display:block
为inline-block
. -
index01.css
的代码为:
.parent{
height: 200px;
background-color: gray;
text-align: center;
}
.child{
background-color: yellowgreen;
height: 200px;
width: 200px;
display: inline-block;
}
3.用display:table
和margin:0 auto
实现
- 首先定宽的块级元素可以设置
margin:0 auto
实现水平居中 -
display:table
这个元素的作用就像<table>
元素. 它定义了一个块级盒子. -
index02.css的代码为;
.parent{ height: 200px; background-color: gray; } /*display:table 在表现形式上很像是block元素 宽度跟着内容走。 */ .child{ display: table; margin: 0 auto; background-color: greenyellow; height: 200px; width: 200px; text-align: center; line-height: 200px; }
4.用position:absolute
和left: 50%
以及transform: translateX(-50%)
实现
- 首先对父元素设置
position: relative
- 对子元素设置绝对定位,相对于父元素定位
- 用
left:50%
则可以根据左边进行定位 - 根据
transform
,则可以根据自身的宽度偏移 -
index03.css的代码为:
.parent{ height: 200px; background-color: gray; position: relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); height: 200px; background-color: greenyellow; }
5.用flex
+justify-content
实现
- 对父元素设置
display:flex
,则第一级子元素是flex-item
- 对子元素设置
justify-content: center;
就可以实现居中
/////////
- 也可以对子元素设置
margin:0 auto
实现居中 -
index04.css的代码为:
.parent{ height: 200px; background-color: gray; display: flex; justify-content: center; } .child{ height: 200px; background-color: greenyellow; /* margin: 0 auto; */ }
三、左中右布局
左中右布局参考一的左右布局,可将三个元素都设置成float:left
或者将三个元素都设置成dispaly:inline-block
四、垂直居中
-
height
和line-height
设置垂直居中 -
display:flex和
align-items: center` - 行级元素设置vertial-align: middle
推荐阅读
补全一段jQuery代码
主要思路是,window.$ = jQuery所以window.jQuery要等于一个函数,这个函数接收一个参数,返回一个对象,返回的对象包含两个方法,这两个方法可以添加text文本和添加class类
yangdepp赞 3阅读 1.1k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 20阅读 1.5k评论 1
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...
Winn赞 11阅读 1.1k评论 4
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...
dragonir赞 12阅读 1.4k
英雄联盟比赛选手的六芒星能力图动画是如何制作的?
最近,在看 LPL 比赛的时候,看到这样一个有意思的六芒星能力图动画:今天,我们就来使用纯 CSS 实现这样一个动画效果!实现背景网格对于如下这样一个背景网格,最好的方式当然肯定是切图。如果一定要使用 CSS,...
chokcoco赞 12阅读 1.2k
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。
chokcoco赞 11阅读 2.9k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。