? CSS布局文字与图片同排,文字上下垂直居中-CSS布局HTML 365bet亚洲版_365Bet充值钱没到账_365bet网址
您的位置:CSS5 > DIV CSS实例 >

CSS布局文字与图片同排,文字上下垂直居中

发布日期:2010-05-16 15:42:45 来源:css5.com.cn

DIV+CSS居中之图片上下垂直居中-图片与文字同排垂直居中CSS 居中


未设置文字和图片在同排同行时候上下垂直居中时,CSS实例图片如下:
div+css垂直居中实例图
说明:
以上“css5.com.cn”为CSS5网网址图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。

DIV+CSS实例代码如下:

  1. ?
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
  3. <html?xmlns="http://www.w3.org/1999/xhtml">?
  4. <head>?
  5. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>?
  6. <title>DIV+CSS实例讲解测试title>?
  7. <style?type="text/css">?
  8. body{?font-size:12px;}?
  9. style>?
  10. head>?
  11. <body>?
  12. <img?src="//www.css5.com.cn/images/CSS5.jpg"
    ?alt="我是高度为37的CSS5图片"?/>CSS5测试文字CSS?
  13. body>?
  14. html>??

说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展:CSS引入-CSS引用)及在图片后跟几个测试文字。
你可以拷贝以上代码新建成html网页,再到浏览器中浏览此新建的网页,结果将如上图。

设置css使文字和图片同排同行时候上下垂直居中
我们只需要在CSS样式,加入CSS代码如下:

img{ vertical-align:middle;}
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。

完整DIV+CSS代码如下:

  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
  2. <html?xmlns="http://www.w3.org/1999/xhtml">?
  3. <head>?
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>?
  5. <title>CSS实例讲解测试title>?
  6. <style?type="text/css">?
  7. body{?font-size:12px;}?
  8. img{?vertical-align:middle;}?
  9. style>?
  10. head>?
  11. <body>?
  12. <img?src="//www.css5.com.cn/images/CSS5.jpg"
    ?alt="我是高度为37的CSS5图片"?/>CSS5测试文字?
  13. body>?
  14. html>?


此网页在浏览器中浏览样式图:
CSS上下垂直居中实例图

我们可以观察上图或自己轻松亲自动手拷贝以上完整css代码和html源代码(源代码)即可实现和掌握css上下垂直居中技巧。

DIV CSS延伸与提高
假如我们设置".yangshi"的高度line-height,要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可,CSS代码如下:
.yangshi img{vertical-align:middle;}
这里值得说明的是高度和line-height一定要大于图片高度,否则也会出现“CSS HACK”在不同浏览器中不兼容情况。

CSS总结:
1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
2、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshi img{vertical-align:middle;}

标签(Tag): 居中 垂直居中 图片居中
本文分享URL地址:https://www.css5.com.cn/shili/108.shtml

作者:div+css

上一页:上一篇:CSS A link hover active visited超链接锚文本几种状态365bet亚洲版_365Bet充值钱没到账_365bet网址
下一页:下一篇:DIV+CSS虚线边框_CSS虚线下划线及虚线列表365bet亚洲版_365Bet充值钱没到账_365bet网址