单行图文混排垂直居中

南瓜小米粥 发表于 前端开发 分类,标签: css script 图文 垂直居中
28 3月 2008
记得“守望幸福for pw6.0 论坛风格”导航中就遇到过这个问题，当时是吧图片高度设为行高然后设置align为absmiddle才解决的。今天又有位同学忽然问我background中的left、right是什么意思。一下把我给问傻了，平时用的稀里糊涂的都没仔细想过。稀里糊涂的还有css script背景位置值的确定，有时真是想不明白为什么会是负值。

    
引用
background : background-color || background-image || background-repeat || background-attachment || background-position
      background-position默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。


<!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="Content-Type" content="text/html; charset=utf-8" />
<title>background-position</title>
<style type="text/css">
* {margin:0px;padding:0px;}
body {font:12px "宋体"}
.cont {margin:30px auto;width:300px;height:300px;border:1px solid #000;background:url(http://cosa.elianba.com/attachment/200803/1206620557_99903b75.gif) no-repeat right center;}
</style>
</head>

<body >
<div class="cont"></div>
</body>
</html>


单行图文混排垂直居中：
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>vertical-align:middle</title>
<style type="text/css">
* {margin:0px;padding:0px;}
body {font:12px "宋体"}
.cont {margin:30px auto;padding:75px 0px;width:300px;height:150px;border:1px solid #000;}
.cont img {vertical-align:middle;}
</style>
</head>

<body >
<div class="cont"><img src="http://cosa.elianba.com/attachment/200803/1206620557_99903b75.gif" width="150" height="150"/>向我看齐</div>
</body>
</html>


PS：background-position的取值没有middle只有center。
« 上一篇：很强大的一种写法 JavaScript DOM编程艺术中的代码片段：下一篇 »

发表我的评论