CSS常见布局与居中

April 发布于2019-08-30 15:54 / 2634人阅读

摘要：常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。

这里，就CSS左右布局，左中右布局，水平与垂直居中，进行讨论。

CSS常用于控制页面布局的定位机制：
普通流、相对定位、绝对定位和固定定位。还可以使用float属性来让元素浮动。

1.左右布局

最常用的就是通过浮动（左浮或右浮）来实现浮动。
float属性允许你将普通流中的元素在它的包含元素内尽可能的向左或向右排列。
你应该设置margin属性来制定浮动元素之间的间距。

不同元素的高度和宽度不同，为防止浮动元素的后一元素自动上浮，可以为父元素赋予clearfix类来清除浮动解决这一问题。


  left
  right

同时在CSS中关于伪类作出声明：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

设置左浮动（或右浮动），将两个子元素左右并排实现布局：

.descendant1,
.descendant1 {
  float: left;
  margin-left: 30px;
}

还可以通过绝对定位,通过元素脱离文档流来实现。


  left
  right

.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}

2.左中右布局

我们类比左右布局，在此基础上实现由两个元素变为三个元素的布局。

通过全部左浮（或右浮）实现：


  left
  center
  right

.descendant1,
.descendant2,
.descendant3 {
  float: left;
  margin-left: 20px;
}

同理，第一个元素左浮，第三个元素右浮；同时设置三个元素为内联元素：

.descendant1 {
  float: left;
  margin-left: 20px;
  display: inline-block;
}
.descendant2 {
  margin-left:20px;
  display: inline-block;
}
.descendant3 {
  float: right;
  margin-right: 260px;
  display: inline-block;
}

通过绝对定位：


  left
  center
  right

.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}
.descendant3 {
  position: absolute;
  left: 120px;
  top: 0;
}

3.水平居中

文字居中：

text-align: center;

如果想让一个元素水平居中，首先确定你已经给元素设定了一个宽度（否则将溢满整个屏幕）。
可以通过设置左右的外边距为auto值来居中（包括图片）。

You can go to everywhere.
If you like.

p.text {
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}

4.垂直居中

在单行文本或按钮、小图中的文字很使用的方法，即设置行高与元素高度一致即可。

button

p.text {
  height: 60px;
  line-height: 60px;
}

也可以根据实际需要尺寸，为所在元素设置上下的padding来实现居中:

p.text {
  padding: 15px 0;
  line-height: 60px;
}

Written by：EdenSheng
Email：singlesaulwork@gmail.com

idc机房托管私有云布局居中水平居中布局 html居中css css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117034.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS常见布局解决方案

摘要：到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用从很久很久以前起，我们就抛弃了布局页面，但是异常强大等属性目前兼容性较差傲娇的程序员应该放弃太低版本的浏览器转自常见布局解决方案水平居中布局 1.margin + 定宽 Demo .child { width: 100px; margin: 0 auto; } ...

Big_fat_cat 2019-08-29 12:41 评论0 收藏0
CSS常见布局解决方案

摘要：到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用从很久很久以前起，我们就抛弃了布局页面，但是异常强大等属性目前兼容性较差傲娇的程序员应该放弃太低版本的浏览器转自常见布局解决方案水平居中布局 1.margin + 定宽 Demo .child { width: 100px; margin: 0 auto; } ...

RancherLabs 2019-08-05 11:22 评论0 收藏0