DIV+CSS中图片和文字居中问题解决方案
来源:互联网 发布:如何评价李鸿章 知乎 编辑:程序博客网 时间:2024/06/01 23:51
http://developer.51cto.com/art/201008/222522.htm
本文和大家重点讨论一下DIV+CSS居中之图片与文字同排垂直居中
DIV+CSS居中之图片与文字同排垂直居中
未设置文字和图片在同排同行时候上下垂直居中时,CSS实例图片如下:
说明:
以上“www.divcss5.com”为divcss5网网址图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。
DIV+CSS实例代码如下:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>DIV+CSS实例讲解测试</title>
- <styletypestyletype="text/css">
- body{font-size:12px;}
- </style>
- </head>
- <body>
- <imgsrcimgsrc="http://www.divcss5.com/images/divcss5.jpg"
- alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字CSS
- </body>
- </html>
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展:CSS引入-CSS引用)及在图片后跟几个测试文字。
你可以拷贝以上代码新建成html网页,再到浏览器中浏览此新建的网页,结果将如上图。
设置css使文字和图片同排同行时候上下垂直居中
我们只需要在CSS样式,加入CSS代码如下:
- img{vertical-align:middle;}
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
完整DIV+CSS代码如下:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>CSS实例讲解测试</title>
- <styletypestyletype="text/css">
- body{font-size:12px;}
- img{vertical-align:middle;}
- </style>
- </head>
- <body>
- <imgsrcimgsrc="http://www.divcss5.com/images/divcss5.jpg"
- alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字
- </body>
- </html>
此网页在浏览器中浏览样式图:
我们可以观察上图或自己轻松亲自动手拷贝以上完整css代码和html源代码(源代码)即可实现和掌握css上下垂直居中技巧。
DIV+CSS延伸与提高
假如我们设置".yangshi"的高度和line-height,要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可,CSS代码如下:
.yangshiimg{vertical-align:middle;}
这里值得说明的是高度和line-height一定要大于图片高度,否则也会出现“CSSHACK”在不同浏览器中不兼容情况。
DIV+CSS总结:
1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
2、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshiimg{vertical-align:middle;}
- DIV+CSS中图片和文字居中问题解决方案
- DIV+CSS中图片和文字混排居中问题解决方案
- CSS 中Div文字居中
- div css 图片和文字上下居中对齐
- css 图片文字居中对齐方案
- css div中文字垂直居中显示
- CSS文字图片div元素居中方法之水平居中
- css - div - 文字居中
- DIV+CSS架构下 如何使DIV中文字水平和垂直居中
- css 图片和文字同时垂直居中
- css-图片和文字垂直居中问题
- CSS将图片和文字垂直居中
- CSS图片文字居中
- css 图片在div中居中问题
- css设置图片在div中居中
- css+div 图片文字垂直居中问题 (转)
- DIV CSS图片居中
- CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)
- (四)IBM Sterling OMS 环境构建之补丁安装
- springmvc 自定义异常处理
- 有限状态机的FPGA实现
- http://www.devstore.cn/code/info/87.html
- 我科退役!我的青春
- DIV+CSS中图片和文字居中问题解决方案
- java 实现微信搜索附近功能
- gitshell同时用于github与gitlab
- iOS解决navigationBar因为图片尺寸问题造成的会向上偏移64的问题
- ReactiveCocoa入门教程——第一部分<转>
- Java内存分析和总结
- 01背包,完全背包,多重背包问题详细介绍以及源代码实现
- redis 3.0的集群部署
- eclipse的人对在eclipse中关联源码