CSS系列之让元素居中

fou7 发布于2019-08-28 17:55 / 2660人阅读

摘要：辅助标签代码代码效果废话要让元素和辅助元素在一行，否则会出现水平不完全居中，当使用时，换行会被解析成空格。

首先我们需要知道元素都有哪些种类？

内嵌元素（display:inline;）如a，span，b，i 【一个不可定制的盒子】

[默认同行可以继续跟同类型标签]
[内容撑开宽度]
[不支持宽高]
[不支持上下的margin和padding]
[代码换行会被解析成空]

块元素（display:block;）如div，p，h1-h6

[默认独占一行显示]
[基本支持所有的css命令]

行内块（display:inline-block;）如img 【img就是这么一个神奇的东东。它既不是内嵌又不是块，而是行内块】

[块在一行显示]
[支持宽高]
[没有宽度时内容撑开宽度]

那么接下来我们依次将上面三种元素居中

一、内嵌元素之单行文本

最最常见的解决办法就是使用text-align和line-height

line-height:200px;
text-align:center;

但是这种处理办法就一定十全十美吗？我不这么认为（估计有人吐槽我强迫症了）
反正我每次选中文字看到非文字区也被选中就很不爽，不过IE6-8只会选中文字

二、块元素居中

解决办法：使用定位元素+margin负值

width:100px;
height:100px;
position:relative;
left:100px;
top:100px;
margin-left:-50px;
margin-top:-50px;

缺点：要求必须知道盒子的宽高

三、行内块居中

（1）把img转化为背景图片，然后用background-position:center;但是需要注意的是由于图片的链接一般都是经常改变的，所以需要这样做：

是不是违背了内容样式分离的原则。

（2）辅助标签

html代码：

CSS代码：

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

效果：

废话：要让img元素和辅助元素span在一行，否则会出现水平不完全居中，当使用inline-block时，换行会被解析成空格。其实网上还有其他办法，比如说风靡已久的table法。网上一大堆这里就不显摆了。

云服务器专线服务 html居中浮动元素 html居中css css元素实例系列

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

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

sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

摘要：这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。零. 变量变量本身的作用是为了保持属性值的可维护性，把所有需要维护的属性值放在同一个地方，快速更改，处处生效，可谓售后无忧。 1.变量声明变量用$符号开头进行声明，任何可以用作CSS属性...

CloudDeveloper 2019-08-30 13:10 评论0 收藏0
css系列之水平垂直居中

摘要：水平居中水平居中没有什么好说的啦，对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素水平居中水平居中没有什么好说的啦，对于行内元素使用text-align;对于块级元素使用margin: auto（前提是已经为元素设置了适当的 width 宽度）; 垂直居中...

MiracleWong 2019-08-29 13:44 评论0 收藏0
《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

摘要：背景想想自己为什么要写这个，难道不是因为这篇道基础面试题附答案文章最近被转载的多，比较多而凑热闹蹭热点显然，肯定是因为这样我才打算写的。继承得到的样式的优先级最低。背景想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉...

DataPipeline 2019-08-30 14:11 评论0 收藏0
css揭秘系列

摘要：基于的解决方案借助规范所引入的和属性，我们可以让它内部的文本也实现居中根据盒对齐模型第三版的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定 7.结构和布局自适应内部元素: min-content（容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素） The great Sir Adam ...

BicycleWarrior 2019-08-29 13:55 评论0 收藏0
【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0