垂直居中问题

今天在写网页的时候遇到多行文字垂直居中问题。

试的多种方法，其中最好用的当然是table了，但我写的这块用table不太好，我使用的是在上一级块元素上加display:table;

文字包的行内元素使用display:table-cell; vertical-align:middle;

如：<div class="div1"><span class="span1"></span></div>

.div{display:table;}

.span1{display:table-cell; vertical-align:middle;}

还挺好使。

时间： 2024-08-08 08:31:05

垂直居中问题的相关文章

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

垂直居中css

.flex {    display: -webkit-box;    display: -webkit-flex;    display: -moz-box;    display: -moz-flex;    display: -ms-flexbox;    display: flex;    /* 水平居中*/    -webkit-box-align: center;    -moz-box-align: center;    -ms-flex-pack: center;    /* I

DIV内容垂直居中

css垂直居中属性设置vertical-align: middle对div不起作用,例如: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Commpatible" content="IE=edge"> 6 <ti

关于未知大小的图片的垂直居中问题

<div class="main"> <img src="3.jpg" /> </div> <style> .main { width:500px; height:600px; border:1px solid black; display:table-cell; vertical-align:middle; text-align:center; } </style> 搞定! 2:背景法: <styl

as3.0 TextField中单行文字内容垂直居中

在开头,先首说一下TextField中单行文字空间是怎样的.图如下 从图中可以看到,当为文字设定像素大小时,我们都可以从TextField中的文字空间信息取得两个信息Ascent与Descent,文字空间与边距的2px一般是固定的.所以如果我们想在TextField中单行文字垂直居中的话,可以这样设定TextField的高度为Ascent+Descent+4px.具体在as3.0中的个人实现代码实例如下: package { import fl.controls.Label; import fl

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

垂直居中小记 line-height table vertical-align：middle

垂直居中分两种情况:1.父元素高度确定的单行文本        2.以及父元素高度确定的多行文本. 1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的,即此时单行文本的行高line-height=height(父元素块高度).(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 ). line-height 与 font-size 的计算值之差,在

CSS 垂直居中

1.单行文本 行高和父元素的高相等即可实现垂直居中 2.多行文本 方式1: 设置父元素display:table: 设置里边的元素display:table-cell:vertical-align:middle:即可使得元素竖直居中,但是此种方式兼容性不是很好低版本的浏览器都不兼容. 方式2: 设置父元素position:relative绝对定位,并设置其子元素position:absolute相对对位,设置top:50%:left:50%:将元素的左上角定位到其父元素的中间,然后设置元素宽度以

未知宽高的元素水平垂直居中方法总结

1.父元素设置display:table;子元素设置display:table-cell; 缺点:IE7不支持,而且子元素会填满父元素,不建议使用 2.使用css3 transform:translate(-50%; -50%) 缺点:兼容性不好,IE9+ 3.使用flex布局 缺点:兼容性不好,IE9+ 4.利用伪类元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

一行或者多行垂直居中问题

在实际开发中,我们会遇到很多需要多行垂直居中的问题,今天空闲做个总结. 1.首先一行问题我就不用说了,给一个line-height一般都能够解决垂直居中的问题. 但是如果是下面这中格式那该如何处理呢? <div> <p>多行多行多行多行</p> <p>多行多行多行多行</p> </div>方法一:也是最重要的.虽然这个方法不兼容ie6 ie7 给div一个父盒子 将父盒子的css设置为display:table. 子盒子display