你的位置:首页 > 软件开发 > 网页设计 > Css中元素居中问题的实现

Css中元素居中问题的实现

发布时间:2016-03-09 15:00:19
前言:在写CSS的时候让元素在高度固定的容器中垂直居中是很简单的,譬如设置容器的padding或者元素的margin之类的都可以做到;让元素在容器中水平居中也有text-align:center、margin:0 auto;之类的属性来帮我们达到目的,但是如何让元素在不确定高度的 ...

前言:

在写CSS的时候让元素在高度固定的容器中垂直居中是很简单的,譬如设置容器的padding或者元素的margin之类的都可以做到;让元素在容器中水平居中也有text-align:center、margin:0 auto;之类的属性来帮我们达到目的,但是如何让元素在不确定高度的容器中垂直居中或者行数不确定的文字在高度固定的容器垂直居中呢?下面我们来讨论几种让元素垂直居中的方法:

 

一、文字的垂直居中

1、单行文字

line-height与height高度相同,就可以让单行文字垂直居中

Css中元素居中问题的实现

2、多行文字

我们可以把多行的文字当做图片来处理,用span将文字封装起来,并设置与图片相同的display属性(inline-block),然后用处理图片垂直居中的方式让多行文字垂直居中即可。

<div class="wrap">  <span class="content">    content<br>    content  </span></div>

原标题:Css中元素居中问题的实现

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。