css在未知高度的情况下实现垂直居中

.img{width:100px;height:110px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid red;overflow:hidden;}

“`

时间： 2024-10-30 03:30:28

css在未知高度的情况下实现垂直居中的相关文章

用CSS让未知高度内容垂直方向居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; tex

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 CSS* { margin:0; padding:0; list-style:none;} #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:r

巧用CSS居中未知高度的块元素

在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .parent { width: 200px; height: 200px; margin: auto; border: 1px solid red; position: relative; } .child { position: absolute; width: 100px; height: 50%; to

CSS解决未知高度垂直居中

尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的. 非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部

绝对定位情况下水平垂直居中小技巧

非绝对定位情况下,一般使用margin:0 auto的方法来进行居中,但在绝对定位情况下,margin:0 auto会失效. 这时,进行水平垂直居中可以如下: position:absolute;left:50%; //left设置为50%,这时是以元素的左侧进行的水平居中,所以需要设置margin-left为元素宽度的一半.top:50%;//垂直居中原理同水平居中margin-top:-100px;margin-left:-100px;width:200px;height:200px;z-i

Python 读取文本文件编码错误解决方案(未知文本文件编码情况下解决方案)

很多情况下我们是这样读取文本文件的: with open(r'F:\.Python Project\spidertest1\test\pdd凉席.txt', 'r') as f: text = f.read()但是如果该文本文件是gbk格式的,那么将会报以下错误: Traceback (most recent call last): File "F:/.Python Project/spidertest1/test/MyTest4.py", line 14, in <module

css在百分比高度时，文字水平垂直居中

给需要垂直居中的文字增加一个父元素,给父元素设置 display:table; 给需要居中的子元素设置 vertical-align:middle; display:table-cell; 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" conten

css实现固定高度及未知高度文字垂直居中的完美解决方案

在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字的话使用height(高度)和line-height(行高)来解决,但是假如页面有多行文字的话固定高度该怎么解决? 或者未知高度我们该用css怎么解决? 且兼容各个游览器! 一:单行文字垂直居中: 如果一个容器中只有一行文字的话,让他垂直居中比较简单直接定义height(高度)和 line-height(

CSS总结（六）——元素的垂直居中（已知高度/未知高度）

元素的垂直居中 1.已知高度宽度元素的水平垂直居中 ① 绝对定位居中 .center{ margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; } ② 绝对定位与负边距实现 .center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; } 2.未知高度宽度元素的水平垂直居中 ① 当元