图片垂直居中之姊妹 DIV垂直居中

最后感谢raozou分享效果代码!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分
被浏览器隐藏,大家可以试试!此外,FF不支持expression.

DIV垂直居中

#menu
{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -150px;
color:blue;
width: 300px;
height: 50px;
border:solid 1px gray;
}

页面水平垂直居中

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

DIV垂直居中

#menu
{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -150px;
color:blue;
width: 300px;
height: 50px;
font-weight:bold;
border:solid 1px gray;
line-height:50px;
font-size:20px;
text-align:center;
}

页面水平垂直居中

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 图片垂直居中之姊妹 DIV垂直居中

    最后感谢raozou分享效果代码! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分被浏览器隐藏,大家可以试试!此外,FF不支持expression. DIV垂直居中 #menu { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; color:blue; width: 300px;

  • js+CSS 图片等比缩小并垂直居中实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 文字或图片元素在DIV中垂直居中

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • CSS将div内容垂直居中案例总结

    CSS将div内容垂直居中案例总结

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果. 二.内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { padding:20px 0

  • 实现css文字垂直居中的8种方法

    实现css文字垂直居中的8种方法

    注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: css垂直居中实现代码: 这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. 2.使用绝对定位和transform 代码如下: 这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸,因为transform中偏移的百分比就是相对于元素自身的尺寸而言. 3

  • 让html元素随浏览器的大小自适应垂直居中的实现方法

    表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行. 但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网.活动展示网等等的时候. 问题: 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中. 解决方案: 1.浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离. (bodyHeight – divHeight)/2 2.浏览器可视区域如果小于元素的高度,即元素距离浏览器可视区域顶部的距离为零. 3.onresize()当浏览器的尺寸改变的

  • 用js 让图片在 div或dl里　居中，底部对齐

    解决图片长\宽大于容器,一边长一边宽,小于容器 在ff,ie里都通过这里是js代码: 复制代码 代码如下: <HTML>  <HEAD>   <TITLE> 我们 www.jb51.net New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT=

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • HTML结构化：实践DIV＋CSS网页布局入门指南

    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构化你的HTML

随机推荐