图片与文本的对齐方式

Posted 蓝心高飛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片与文本的对齐方式相关的知识,希望对你有一定的参考价值。

 1、对图片进行宽高设置

  对图片进行宽高设置时,只设置其中一个就可以,另一个会按照相应比例进行改变大小 

2、设置图片,可使文本图片垂直居中

  vertical-align: middle;

  注:默认图片与文字底部对齐

 3、设置图片,可使文本与图片是顶部居中

  float: left;

 1 //文字与图片中部居中
 2 h1 img{
 3             width: 300px;
 4             vertical-align: middle;
 5         }
 6 
 7 
 8 //文字与图片顶部对齐
 9 h1 img{
10             width: 300px;
11              float: left;
12         }

 

以上是关于图片与文本的对齐方式的主要内容,如果未能解决你的问题,请参考以下文章

将图片与标题文本完全对齐

图片与文字的对齐方式

css如何对齐文本与文本输入框

Input标签与图片按钮水平对齐解决方法

CSS入门知识-图片水平对齐技巧

word中如何让文字与图片上下居中?