最新消息:欢迎大家来到小月博客

探究css中各种情况下的元素的垂直和水平居中的问题

web前端 小月 877浏览 0评论

探究css中各种情况下的元素的垂直水平居中的问题

 

本文来自(零度)之前文章失误消失,好不容易找回来一部分,赶紧补上喽!

今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码。

04

问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示??


第一种情况: 外边的容器宽度和高度确认,里边是行内元素,那么答案就是

.container{width:200px; height:100px; line-height:100px;}//外边的容器的css设置和命名  这样就ok了
*************于是有人说 你在逗我 这个我也知道。。。*************** 别着急,循序渐进嘛!

第二种情况 里边的容器是img元素

.container{width:200px; height:100px; line-height:100px; vertical-align:middle; }
.wrap{vertical-align:middle;}//图片的命名和css代码

第三种情况就是里边的元素是div元素

.cantainer{width: 300px; height: 150px; background: blue; text-align: center; vertical-align:middle; display: table-cell;}//添加display属性
.wrap{margin:auto; width:100px;}

有人说还能用js来计算里边容器的宽度和高度然后用定位呢   我想说 思路是对的 但是请你看一下标题,

一般面试出的这个问题不是为了考你的js基础 而且看你的css基础 和你的思维能力 分情况来解释这样会觉得你这个人思路敏捷清晰,会留下一个好印象

*************人家第一次(写),有点紧张************ 不喜勿喷

 

转载请注明:小月博客 » 探究css中各种情况下的元素的垂直和水平居中的问题

一点心意×
 收藏 (2)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册