在编写页面的过程中，会碰到这样一个现象：
文字也图标没有居中对齐，同时，图标也会出现边框？对于这两个问题，我们先看
图标与文字的居中对齐问题，我们可以使用css中vertical-align属性，它的含义是设置元素的
垂直对齐方式。这里，我们使用居中垂直对齐:verical-align:此实现方式符合w3c标准；
注意：align="absmiddle"也可以实现图片与文字的居中对齐，但是它不符合W3C标准，不建议使用。
我们来看另一个问题：图标有边框；其实设置图标的边框为0即可:border:0
代码改正后img的代码如下：
&img src="imgs/6.png"
style="border:0vertical-align:"
效果如下图：
浏览: 16809 次
来自: 武汉
解决大问题了
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'CSS3 box-align 属性
CSS3 box-align 属性
通过使用 box-align and box-pack 属性，居中 div 框的子元素：
height:100
display:-moz-
-moz-box-pack:
-moz-box-align:
display:-webkit-
-webkit-box-pack:
-webkit-box-align:
box-align:
页面底部有更多实例。
浏览器支持
目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
定义和用法
box-align 属性规定如何对齐框的子元素。
JavaScript 语法：
object.style.boxAlign=&center&
box-align: start|end|center|baseline|
对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。
对于反方向的框，每个子元素的下边缘沿着框的底边放置。
对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
拉伸子元素以填充包含块
亲自试一试 - 实例
该例演示如何使用 JavaScript 来改变元素的 box-align 值。如何设置静态文本框的字体垂直居中和水平居中？
[问题点数：20分，结帖人yuan0716]
如何设置静态文本框的字体垂直居中和水平居中？
[问题点数：20分，结帖人yuan0716]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2008年2月 VB大版内专家分月排行榜第一2003年4月 VC/MFC大版内专家分月排行榜第一2002年11月 VC/MFC大版内专家分月排行榜第一
2011年11月 VC/MFC大版内专家分月排行榜第二2008年3月 VB大版内专家分月排行榜第二2008年3月 硬件/嵌入开发大版内专家分月排行榜第二2003年4月 其他开发语言大版内专家分月排行榜第二2003年4月 VB大版内专家分月排行榜第二2003年3月 VB大版内专家分月排行榜第二
匿名用户不能发表回复！|中文(简体)
中文(繁體)
中文(台灣)
中文(新加坡)
中文(香港)
在准备编辑HTML网页之前，先了解一下HTML代码的基础知识。
学习不同标签，你可以使用它们改变字号或者文本格式。比如在括号内的“b”用来把字体加粗。“i”用来表示斜体字。在代码中不要包括引号。
练习使用配对标签。大多数格式标记需要两个标签，分别在文本的开头和结尾。第一个标签将包括标签括号内（&&）的字母和符号。第二个标签将包括一个反斜线，并位于标签之前。例如，在加粗的文本开头的括号内插入“b”，并在文本结尾的括号内插入“/b”。
找出在网页中想要居中的文本。
在文本开头之前的括号内插入标签“center”。不要在标签和文本之前包括空格。
在文本结尾后的括号内插入“/center”。不要包括空格。
保存你的网页。浏览网页看看文本是否按要求对齐。
如果没有改变文本的对齐方式，那么需要运用一个程序，比如HTML5这样使用CSS而不是HTML代码的程序。试试用第二种方法来正确的对齐文本。
在准备改变网页的CSS语言之前，先了解一下CSS的基础知识。CSS代码嵌入HTML代码，因为两种标记语言共同执行。
了解文本主体标签h1，h2和h3。这些用来标记一个网页的段落，或者字号小一些的普通文本。h1是最大的标题，h2和h3次之。这与HTML中用来标识各个部分类似的语言。
用圆括号代替尖括号。在“body”或“h1”之后将CSS标签插入圆括号内。例如，你可以把“text-indent:50px”插入圆括号内，表示缩进文本。在代码中不要包含引号。
在想要编辑的文本开头找出HTML的括号。将要把CSS格式的代码写入HTML代码这一行的第一个括号内。
例如，如果你想改变大标题，可以在括号内找到“h1”。
把以下的代码插入“h1”之后，并位于尾括号之前："text-align=" 。不要包括引号。
在分号之后加入尾括号。保存网页。
你也可以把“居中”换成“右对齐”，“左对齐”或者“两端对齐”等不同的排版方式。
基本的HTML技能
基本的CSS技能
本页面已经被访问过17,749次。欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
text-align之CSS居中（text-align:center）、CSS内容居左(text-align:left)、CSS文字居右(text-align:right)样式属性篇，图片、文字内容对齐 居中 居左 居右篇
CSS text-align目录
一、text-align样式语法
1、text-align的值与说明：
text-align语法：
text-align : left | right | center | justify
text-align参数值与说明：
left : 左对齐
right : 右对齐
center : 居中
*justify : 两端对齐（不推荐使用，通常大部分浏览器不使用）
我们对text-align常用的参数值为left、right、center
text-align功能说明：
设置或检索对象中文本的左中右对齐方式。
2、使用范例与使用语法
div{ text-align:left } 对象内内容（图片和文字等）将靠左对齐
div{ text-align:right} 标签内内容（图片和文字等）将靠右对齐
div{ text-align:center } div标签内内容（图片和文字等）将居中对齐
二、text-align常使用地方
text-align常常用于盒子里的文字、图片等内容居左、居中、局右。比较常见是常规的让内容局左或居中对齐排列。
text-align举例截图
三、text-align实例
我们设置3个盒子，分别都设置盒子、相同，再分别设置三个盒子里内容靠左对齐、居中对齐、靠右对齐。
我们都设置3个盒子为50px；为300px；便于观察我们设置3个都1个黑色样式。
1、HTML+CSS代码
1）、CSS代码
.div1{&width:300&height:50&:1px&solid�&text-align:left}&.div2{&width:300&height:50&border:1px&solid�&text-align:center}&.div3{&width:300&height:50&border:1px&solid�&text-align:right}&/*&&div1&div2&div3&分别设置&靠左&居中&靠右对齐&www.divcss5.com&*/&
2）、HTML代码
&class=&div1&我被靠左对齐&&class=&div2&我被居中显示&&class=&div3&我被靠右对齐&
2、案例截图
内容居左、内容居中、内容局右演示案例截图
通过设置text-align left、text-align right、text-align center对齐方式实现居左对齐、居右对齐、居中对齐样式效果。希望大家通过基础和实例掌握CSS text-align样式。
四、text-align样式属性总结
CSS居中，通常我们对对象设置text-align:center居中样式即可实现。而平时我们的文章内容均居左text-align:left，大家要记住我们所到内容居左、居右、居中要知道使用text-align样式属性即可实现。
通常我们让图片、文字内容居左靠左对齐、居中对齐、居右靠右对齐显示，我们使用text-align属性单词即可实现对象内内容根据需求对齐。text-align:left 内容靠左居左对齐；text-align:right内容靠右居右对齐；text-align:center内容居中对齐。
如果需要内容使用属性样式。了解可进入css line-height教程：
4、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 16:55
原创：本文www.divcss5.com DIVCSS5版权所有。 DIVCSS5.com 学习与资源分享平台}