DIV+CSS中图片和文字混排居中问题解决方案
2016-08-22 15:13
561 查看
DIV+CSS居中之图片与文字同排垂直居中
未设置文字和图片在同排同行时候上下垂直居中时,CSS实例图片如下:
说明:
以上为图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。
DIV+CSS实例代码如下:
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展:CSS引入-CSS引用)及在图片后跟几个测试文字。
你可以拷贝以上代码新建成html网页,再到浏览器中浏览此新建的网页,结果将如上图。
设置css使文字和图片同排同行时候上下垂直居中我们只需要在CSS样式,加入CSS代码如下:
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
完整DIV+CSS代码如下:
此网页在浏览器中浏览样式图:
我们可以观察上图或自己轻松亲自动手拷贝以上完整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;}
未设置文字和图片在同排同行时候上下垂直居中时,CSS实例图片如下:
说明:
以上为图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。
DIV+CSS实例代码如下:
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmls="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>CSS测试</title> <style type="text/css"> body{font-size:12px;} </style> </head> <body> <img src="https://www.baidu.com/img/2016_8_22bimushi_cddc674c4d103d98d2450f174b543628.gif" />测试文字 </body> </html>
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展:CSS引入-CSS引用)及在图片后跟几个测试文字。
你可以拷贝以上代码新建成html网页,再到浏览器中浏览此新建的网页,结果将如上图。
设置css使文字和图片同排同行时候上下垂直居中我们只需要在CSS样式,加入CSS代码如下:
img{vertical-align:middle;}
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
完整DIV+CSS代码如下:
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmls="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>CSS测试</title> <style type="text/css"> body{font-size:12px;} img{vertical-align:middle;} </style> </head> <body> <img src="https://www.baidu.com/img/2016_8_22bimushi_cddc674c4d103d98d2450f174b543628.gif" />测试文字 </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中图片和文字居中问题解决方案
- CSS解决文字与图片不能水平居中对齐的问题
- DIV+CSS解决图片文字对齐的问题
- div+css解决图片垂直居中问题
- CSS 解决最难的 DIV 3列居中问题
- CSS文字图片div元素居中方法之水平居中
- 使用CSS解决文字环绕图片问题的代码
- 解决DIV+CSS在FireFox中的居中问题
- Div垂直居中及容器内图片垂直居中的CSS解决方法
- div+css的图片居中的问题
- CSS解决DIV居中相关问题
- CSS 图片+文字,文字垂直居中问题
- 纯css完美地解决图片在div内垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、
- 纯css实现div中单行文字,多行文字,嵌套div垂直水平居中问题
- 在可编辑div中插入文字或图片的问题解决思路
- 在可编辑div中插入文字或图片的问题解决思路
- CSS 解决表单单行文本框中的文字垂直居中问题
- li中的图片和文字不对齐div+css,解决方法
- CSS解决DIV垂直居中的问题
- DIV+CSS中让布局居中_背景图片居中_文字内容居中