ShopJsp 最专业权威的商城系统提供商,最适合二次开发的商城系统! 快速联系通道    电话:010-62910181  手机:18611625933   QQ:94367128

三个方法搞定:java开发中如何使用CSS代码控制图片与文字对齐

2016-06-27  来源:华宇盈通

  java开发中,代码的修改直接反应到页面展现上,而且现在各种浏览器QQ、360、搜狗等使用都很方便分别有大量的用户群,不同浏览器的兼容问题同时也为java初学者学习java开发带来了更大的难度。一个div标签中,如果同时存在图片和文字,往往容易导致浏览器中运行效果出现偏差,多表现为文字偏下。这个问题如何解决呢?shopjsp工程师在这里教您java开发中如何使用CSS代码控制图片与文字对齐,希望能够为爱好java的您提供一些帮助。

  针对图片和文字对不齐的现象,这里我们总结三种方法,用登录图片按钮和找回密码文字按钮为实例来进行介绍:

  1、简单粗暴,div标签中,文字和图片分开放

  分别把需要对齐的“登录”图片和“找回密码”文字放在两个不同的div中,然后根据显示需要,使用“margin”进行定位,控制图片与文字对齐。

  html代码如下:

CSS控制图片与文字对齐

  两个div代码分别如下:

  CSS控制图片与文字对齐

“登录”div

CSS控制图片与文字对齐

“找回密码”div

  2、添加“vertical-align:middle”到相应的div中

  这是比较常用,操作起来也比较简单的一种方法,通过vertical-align:middle属性控制图片和文字垂直居中对齐,保持界面美观,具体CSS代码如下:

CSS控制图片与文字对齐

  3、将图片设置为背景图片

  使用“background”将登录图片设置为背景图片,然后通过padding属性控制文字和图片在同一行中显示,具体操作如下:

CSS控制图片与文字对齐

  设置padding属性如下:

CSS控制图片与文字对齐

  通过以上三种方法,都可以实现使用CSS代码控制图片与文字对齐的目标,其中第二种方法即通过添加“vertical-align:middle”属性操作起来更简便,更容易掌握,这里比较推荐大家使用。有更多java方面的问题欢迎您和我们一起探讨!

 
在线咨询