DIV和Table的水平、垂直居中

一般图片的居中问题容易解决，我的解决方法是通过样式设置：
 background-image:url(path) //链接图片的路径
 background-repeat:repeat;  //设置图片是否是否水平、垂直延展。可用的参数有：repeat、repeat-X、repeat-Y和no-repeat。
 background-position:bottom center;这个就是设置图片的具体位置，第一个是水平，第二就是垂直方向的。还可以使用具体的像素（为当前容器里的绝对像素）。

文字的水平居中很容易设置
在CSS中使用Text-align:就可以了
Table还可以用align:

DIV的垂直居中：首先获取当前DIV的高度h，然后设置line-height:h; vertical-align:middle.这样文字就可以垂直居中显示。
Table好象对上述设置不支持，所以直接在Table标记里添加一属性：valign：middle。同时还要设置padding-top一值，我见网上有说设置padding-top :2px就可以了，我在项目中也是这个像素。但我不知道这个像素值是否跟当前的tr高度有关。

时间： 2024-10-17 22:30:21

DIV和Table的水平、垂直居中的相关文章

CSS实现图片在div a标签中水平垂直居中

CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src="test.jpg" /> </a></div> /*For Firefox Chrome*/.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:cent

css如何将div实现全屏水平垂直居中

css如何将div实现全屏水平垂直居中:本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title

如何让高度自适应的div中的文字水平垂直居中

1.在做数据展示的时候,因为后台没有数据,为了提示用户没有数据,自己手写了一个div中间显示一个"暂无数据的字样", 然后控制显示和隐藏,这样方法有两种: 第一种:设置display隐藏,但有一个问题,因为我的div中用了display:table-cell,所以起了冲突, 第二种:更改z-index的值 不显示的时候设置0,显示的时候设置最大值就行(推荐使用) 本文主要是探讨,因为外层的div的宽度和高度是不固定,导致了文字不能水平垂直居中的问题,解决办法: #big{ width:

jQuery如何将div设置为水平垂直居中

jQuery如何将div设置为水平垂直居中:使用CSS也可以实现div的水平垂直居中效果,但是有时候可能需要动态的调整,下面就介绍一下如何用jQuery实现对象的水平垂直居中效果,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.c

css 实现DIV水平垂直居中于屏幕

原文地址: http://www.manongjc.com/article/374.html css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码. 代码如下: <!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title> <style type="text/css"&g

CSS：div/img水平垂直居中

div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test{ position: absolute; width: 100px; height: 100px; background: pink; left: 0; rig

未知尺寸元素水平垂直居中:

浏览器参照基准:Firefox, Chrome, Safari, Opera, IE * 该未知尺寸元素水平垂直居中方案基于 inline-block 元素的 vertical-align:middle 特性实现,在这里需要对 line box 及 vertical-align 的应用情况有一定的了解 /*水平居中*/ text-align:center vertical-align知识点 vertical-align适用于 inline level, inline-block level 及

三栏布局和水平垂直居中demol例子

html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动和布局</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <di

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht