网页制作实例:用CSS实现图片垂直居中方法

  网页制作,用CSS实现图片垂直居中方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src="http://www.ddvip.com/images/logo.gif"/></p></div>

时间: 2024-11-18 01:29:11

网页制作实例:用CSS实现图片垂直居中方法的相关文章

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介: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

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

Dreamweaver CS3网页制作中的CSS布局规则

虽然webjx.com一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局,但依然很多朋友在使用.建立您可以使用DW的代码编辑器进行CSS代码的编写.今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则 . CSS文件的链接方式  ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中  CSS规则定义有三种  ·类比如".RedText".".BlueText"和".Bi

清除网页中浮动广告和动态图片的方法

  清除网页中浮动广告和动态图片的方法:我们在上网的时候经常会有一些非常可恶的网站上有很多非常可恶的浮动的漂浮的广告,它们严重阻挡了我们的视线,让我们不能正常地浏览网页内容,而且很多网站上的浮动窗口连关闭按钮都没有,根本就无法关闭,或是关闭之后几秒钟又弹出来.非常烦人,因此小编下面就跟大家介绍一下这种情况的解决方法! 操作步骤/方法: 1.打开IE浏览器,点击右上角设置按钮; 2.在弹出的下拉菜单中点击internet选项设置; 3.在弹出的对话框中选择最上方的安全标签; 4.然后单击安全标签下

CSS解决图片垂直居中的方法

图片垂直居中是DIV+CSS布局中经常碰到的问题,下面就这个问题我们进行研究并给出一个解决方法! 目的是为了使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box {         /*非IE的主流浏览器识别的垂直居中的方法*/         display: table-cell;        

学习网页制作之总结CSS十大技巧

css|技巧|网页 1.css字体简写规则 当使用css定义字体时你可能会这样做: font-size:1em;line-height:1.5em;font-weight:bold;font-style:italic;font-variant:small-caps;font-family:verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps verdana,serif 现在好多了吧,不过有一点要注意:使用这一简写方

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a