您的位置：首页 > 网站优化 > css  >  css中文字图片背景图居中的方法汇总

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

 更新时间：2016年10月10日 07:06  点击：1726
今天给一个客户内容需要居中了,在这里用到了css居中问题,今天我给各位整理了一下css中文字图片背景图居中的方法,这些的方法非常的有用,各位可以参考参考.

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>div字体居中实例</title>
<style>
div{text-align:center}
</style>
</head>
<body>
<div>我将被居中</div>
</body>
</html>

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

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

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

1、div内文字左右居中实例的完整HTML代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>div字体居中实例</title>
<style>
.divcss5{text-align:center}
</style>
</head>
<body>
<div>我没有设置居中css样式</div>
<div class="divcss5">我将被居中</div>
</body>
</html>

2、实例截图

三、div左右居中总结   -  

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


四\图片在DIV内水平居中

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

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

align="center"使用方法：

<div align="center"></div>
align="center"居中图片DIV+CSS实例代码：
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
</head>
<body>
<div align="center"><img src="/img201305/divcss5-logo-201305.gif" /></div>
</body>
</html>

 

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

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

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
<style>
.divcss5{text-align:center}
</style>
</head>
<body>
<div class="divcss5"><img src="/img201305/divcss5-logo-201305.gif" /></div>
</body>
</html>

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}

[!--infotagslink--]

相关文章

  • js URLdecode()与urlencode方法支持中文解码

    下面来介绍在js中来利用urlencode对中文编码与接受到数据后利用URLdecode()对编码进行解码，有需要学习的机友可参考参考。 代码如下 复制代码 ...2016-09-20

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • 关于Mysql中文乱码问题该如何解决(乱码问题完美解决方案)

    最近两天做项目总是被乱码问题困扰着，这不刚把mysql中文乱码问题解决了，下面小编把我的解决方案分享给大家，供大家参考，也方便以后自己查阅。首先：用show variables like “%colla%”；show varables like “%char%”；这两条...2015-11-24

  • C#读取中文文件出现乱码的解决方法

    这篇文章主要介绍了C#读取中文文件出现乱码的解决方法,涉及C#中文编码的操作技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25

  • Mysql在debian系统中不能插入中文的终极解决方案

    在debian环境下，彻底解决mysql无法插入和显示中文的问题Linux下Mysql插入中文显示乱码解决方案mysql -uroot -p 回车输入密码进入mysql查看状态如下：默认的是客户端和服务器都用了latin1，所以会乱码。解决方案:mysql>use...2013-10-04

  • linux mint 下mysql中文支持问题

    一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21

  • Windows服务器MySQL中文乱码的解决方法

    我们自己鼓捣mysql时，总免不了会遇到这个问题：插入中文字符出现乱码，虽然这是运维先给配好的环境，但是在自己机子上玩的时候咧，总得知道个一二吧，不然以后如何优雅的吹牛B。...2015-03-15

  • php怎么用拼音 简单的php中文转拼音的实现代码

    小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06

  • Java连接数据库oracle中文乱码解决方案

    这篇文章主要介绍了Java连接数据库oracle中文乱码解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-16

  • ps快速抠出白色背景下的透明玻璃杯教程

    ps软件是现在很多人比较喜欢的，这次文章就给大家介绍ps软件的抠图技巧，ps快速抠出白色背景下的透明玻璃杯，一起来看看。 &#8195;&#8195;1、如果是白底抠图的话，先将...2017-07-06

  • JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法。分享给大家供大家参考，具体如下：这里演示JavaScript用按钮随意变换背景颜色，每点击一下按钮，就可以随机改变一种网页背景颜色。颜色值事先是保存在JS的数组里...2015-10-21

  • FlashFXP连接站点中文显示乱码解决办法

    FlashFXP是一款常用的服务器客户连接软件了，我们可以通过FlashFXP来上传或下载文件，但有一些朋友使用FlashFXP时碰到中文目录或文件名乱码问题，那么要如何来解决呢？具体就...2016-10-10

  • CSS制作的页面背景固定和滚动效果

    背景固定效果在许多的网站都能看到，今天我们一起来看一个关于CSS制作的页面背景固定和滚动效果，应用非常的好用希望对各位带来帮助。 如何创建一个不需要Javascript...2016-09-14

  • php中把unicode编码转化为中文

    小编在网上看到最多的就是汉字转换unicode编码了，今天我们看到一个反过来的操作就是把unicode转换成中文了，下面一起来看看 这两天帮别人开发微信平台好友板块，存...2016-11-25

  • php 判断是否是中文/英文/数字示例代码

    复制代码 代码如下: $str='asb天水市12'; if (preg_match("/^[/x7f-/xff]+$/", $str)){ echo '全部是汉字'; }else { echo '不全是汉字'; } /** PHP自带的判断是否是中文， eregi('[^/x00-/x7F]', $str ) //中文 ereg...2013-10-04

  • 国庆网页背景代码-首页国庆背景代码

    这款国庆背景代码是一款仿各大门户网站的，如网易，163，新浪，sina,sohu等网站的60周年国庆背景代码给各位朋友提供了哦，如果喜欢可以来看看这款为国庆而改变网页北景的代码...2016-09-20

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28

  • php中文转换成拼音代码

    <?php教程 function cn2pinyin($_string, $_code='gb2312') { $_datakey = "a|ai|an|ang|ao|ba|bai|ban|bang|bao|bei|ben|beng|bi|bian|biao|bie|bin|bing|b...2016-11-25

  • three.js显示中文字体与tween应用详析

    这篇文章主要给大家介绍了关于three.js显示中文字体与tween应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-04

  • JavaScript过滤字符串中的中文与空格方法汇总

    这篇文章主要介绍了JavaScript过滤字符串中的中文与空格方法汇总 的相关资料,需要的朋友可以参考下...2016-03-09