图片实现在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>
<style type="text/css">
#head{width:200px;height:100px;margin:0 auto;border:1px solid #000000;}
span.tupian-middle{display:block;text-align:center;margin:20px auto;}
</style>
<div id="head"><span class="tupian-middle"><img src="baidu.jpg" /></span></div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#head{width:200px;height:100px;margin:0 auto;border:1px solid #000000;}
span.tupian-middle{display:block;text-align:center;margin:20px auto;}
</style>
<div id="head"><span class="tupian-middle"><img src="baidu.jpg" /></span></div>
最近这些天在学习CSS+DIV的布局方式,以下是自己练习,通过CSS+DIV布局的页面代码:
/*定义body中的样式*/
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif,宋体;
color:#FF9900;
background-color: #CCC;
text-align: center;
}
/*链接样式*/
a {
text-decoration: none;
font-weight: bold;
color: #666;
outline: none;
}
a:visited {
color: #666;
}
a:active {
color: #666;
}
a:hover {
color: #666;
text-decoration: underline;
}
/*定义h2字体样式*/
h2 {
font-size: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
/*定义help中的DIV样式在屏幕绝对居中显示*/
#content {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background: #FFF;
border: 2px solid #666;
text-align:left;
width: 600px;
voice-family: "\"}\"";
voice-family:inherit;
width: 580px;
}
/*定义answer中的DIV样式*/
#mydiv{
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
border-top: #ccc 2px solid ;
border-left: #ccc 1px dashed;
border-bottom: #ccc 1px dashed;
border-right: #ccc 1px dashed;
cursor:hand;
}
/*图片绝对居中定位*/
img.imiddle{
display:block;text-align:center;margin:20px auto;
}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif,宋体;
color:#FF9900;
background-color: #CCC;
text-align: center;
}
/*链接样式*/
a {
text-decoration: none;
font-weight: bold;
color: #666;
outline: none;
}
a:visited {
color: #666;
}
a:active {
color: #666;
}
a:hover {
color: #666;
text-decoration: underline;
}
/*定义h2字体样式*/
h2 {
font-size: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
/*定义help中的DIV样式在屏幕绝对居中显示*/
#content {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background: #FFF;
border: 2px solid #666;
text-align:left;
width: 600px;
voice-family: "\"}\"";
voice-family:inherit;
width: 580px;
}
/*定义answer中的DIV样式*/
#mydiv{
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
border-top: #ccc 2px solid ;
border-left: #ccc 1px dashed;
border-bottom: #ccc 1px dashed;
border-right: #ccc 1px dashed;
cursor:hand;
}
/*图片绝对居中定位*/
img.imiddle{
display:block;text-align:center;margin:20px auto;
}
PRE 元素内的文字是已经格式化的。空格和回车都是预留的
可以将页面文字内容包含在<pre></pre>中
调用后最终实现效果:http://www.sft800.com/help.html