一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

css中文字图片背景图居中的方法汇总

时间:2016-09-08 编辑:简简单单 来源:一聚教程网

一、让网页所有DIV标签内文字居中   -  

实现所有DIV内字体居中实例完整网页源代码:





div字体居中实例



我将被居中


二、实现对指定div内容居中   -  

要实现对网页中某个DIV对象内文字字体居中,我们需要CSS命名新建一个用于CLASS或ID的CSS选择器,在网页中需要地方使用id或class调用命名即可。

这里命名为“.divcss”,html中使用class引用。

1、div内文字左右居中实例的完整HTML代码如下:




div字体居中实例



我没有设置居中css样式

我将被居中


2、实例截图

三、div左右居中总结   -  

对于其它文字字体或图片要在其它网页标签(比如:p、span、h1等标签)内水平左右居中,同样我们使用“text-align:center”即可实现。


四\图片在DIV内水平居中

让图片中DIV对象盒子内水平居中,和让文字字体在DIV盒子内水平居中CSS相同。
CSS让对象内容居中样式单词为:
text-align:center
text-align 为内容居于对象什么位置属性
center值为居中
一、传统HTML让图片横向水平居中方法   -  

直接在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。

align="center"使用方法:


align="center"居中图片DIV+CSS实例代码:




图片横向居中




 

二、CSS让图片中DIV对象内水平居中   -  

使用CSS样式让DIV内图片居中(水平居中)(相关知识阅读:html img图片)
1、实例HTML+CSS完整代码如下:





图片横向居中





2、水平居中实例截图


小结:
无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现,一般推荐使用CSS进行,但网页多时候,我们只需要修改CSS文件里对应一处选择器样式即可修改内容居中、居左、居右

CSS背景图居中

横向居中:
background:url(图片地址) no-repeat center

纵向居中:

background:url(图片地址) no-repeat left 50%

这里50%是随意设置考上为50%距离,细节具体上下垂直居中需要再通过百分比均衡设置。
4、背景图片一般案例
Body设置网页背景css代码
body{background:url(/img201301/divcss5-logo-2013.gif) no-repeat 0 0}

热门栏目