css 字体无法居中 我设置的 感觉text-align: center;无用

我设置的 感觉text-align: center;这个属性都没有什么作用,只好另外加left: -20px;
但是还是有很多,问题。因为那样只会让个别的居中。还有我的opacity:0.5; 这种设置兼容性很差。有些浏览器是完全不透明的。我很无解。。代码明显不是居中明显不是居中只有一个居中

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>京东商城</title>
<style type="text/css">
body,ul,li,h1,h2,h3,img,p,div{
 margin: 0; margin: o;}
.add{width: 990px; height: 70px; margin: 10px auto;}
.nav{width: 990px; height: 40px; margin: 10px auto; 
    background-color:#E63D40;}
.nav ul{ list-style: none;  
        }
.nav ul li{ float:left;width: 85px; height: 40px;
            font-family: 微软雅黑; color: white;  
            font-weight: bolder;
            line-height: 40px;
            position: relative;
            }       
.nav ul li a{
            width: 85px; height: 40px; position: absolute;
            text-align: center; margin: 0 auto;
             top: 0; left: -20px; bottom: 0; right: 0px;
            }
.nav ul li a:hover{ opacity:0.5; 
background-color: rgb(164,0,0);position: absolute;
            }
#li1{ width: 210px; height: 40px; }
</style>
</head>
<body>
    <div class="add">
        <img alt="广告" src="add.gif">
    </div>
    <div class="nav">
        <ul>
            <li id="li1">全部商品分类</li>
            <li><a href="javascript:;"></a>首页</li>
            <li><a href="javascript:;"></a>服装城</li>
            <li><a href="javascript:;"></a>京东超市</li>
            <li><a href="javascript:;"></a>团购</li>
            <li><a href="javascript:;"></a>夺宝岛</li>
            <li><a href="javascript:;"></a>闪购</li>
        </ul>
        <img alt="支付有礼" src="zfyl.jpg" align="right">
    </div>
</body>
</html>

4个回答

图片说明
首页设置一个div,同时将li的left:-20px去掉
代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>京东商城</title>
<style type="text/css">
body,ul,li,h1,h2,h3,img,p,div{
 margin: 0; margin: o;}
.add{width: 990px; height: 70px; margin: 10px auto;}
.nav{width: 990px; height: 40px; margin: 10px auto; 
    background-color:#E63D40;}
.nav ul{ list-style: none;  
        }
.nav ul li{ float:left;width: 85px; height: 40px;
            font-family: 微软雅黑; color: white;  
            font-weight: bolder;
            line-height: 40px;
            position: relative;
            }       
.nav ul li a{
            width: 85px; height: 40px; position: absolute;
            text-align: center; margin: 0 auto;
             top: 0;  bottom: 0; right: 0px;
            }
.nav ul li a:hover{ opacity:0.5; 
background-color: rgb(164,0,0);position: absolute;
            }
#li1{ width: 210px; height: 40px; }
</style>
</head>
<body>
    <div class="add">
        <img alt="广告" src="add.gif">
    </div>
    <div class="nav">
        <ul>
            <li id="li1">全部商品分类</li>
            <li><a href="javascript:;"></a><div align="center">首页</div></li>
            <li><a href="javascript:;"></a><div align="center">服装城</div></li>
            <li><a href="javascript:;"></a><div align="center">京东超市</div></li>
            <li><a href="javascript:;"></a><div align="center">团购</div></li>
            <li><a href="javascript:;"></a><div align="center">夺宝岛</div></li>
            <li><a href="javascript:;"></a><div align="center">闪购</div></li>
        </ul>
        <img alt="支付有礼" src="zfyl.jpg" align="right">
    </div>
</body>
</html>

li标签上加,text-align:center

reancool
reancool 。3Q。but。。还是不行。。
接近 4 年之前 回复

你的文字不在连接标签里面,你是要搞什么东西?

.nav ul li a去掉 left: -20px;,下面的样式增加text-align:center

建议你将文字放入连接标签里面去,而不是用a覆盖到文字上面

 .nav ul li {
 ......原来的css
 text-align:center
                }

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
text-align:center设置居中不起作用
text-align:center设置居中不起作用   参考:http://www.imooc.com/qadetail/94156   text-align只是让文字元素居中,margin:auto是让整个边框加文字居中  
text-align无法实现居中
解决方法,加一句:margin:auto;
CSS中text-align: center无法居中,而在元素属性中设置却可以。
[code=HTML]rn rn rn rn 对以下HTML进行CSS:rn rn onern 一级标题rn rn rn rn redrn greenrn bluern rn rn 二级标题rn rn rn rn redrn greenrn bluern rn rn rn rn[/code]rnrn这样是可以居中的,但是在CSS中rnrn[code=CSS]#main p /*Id为main,并且是 元素*/rnrn text-align: center;rn font-size:20px;rn color:#112255;rn[/code]rnrn却无法实现居中?
你的元素居中对齐了吗?——关于 'text-align:center' 的问题(转载)
原文地址:http://topic.csdn.net/u/20100702/15/e0087252-0975-424b-8b9b-ce6c6cb3699d.html 向作者致敬!   昨天在论坛里溜达的时候,发现有同学遇到了居中的问题,页面在 IE 里居中对齐好好的,为什么在其他浏览器里面就不灵了呢?  我曾经也在写一个 JS 日历的时候也被居中弄的焦头烂额,苦不堪言。想必不少人都遇到过这个...
text-align居中标签
本职业规划路线是专门针对想要从事Python web开发的同学而准备的,并且是严格按照企业需求的标准定制的学习路线。路线中包含Python基础和进阶、前端、MySQL数据库、Flask和Django框架以及多个企业真实项目。在学习完本路径中所有的课程后,从前端页面的实现,到后台代码的编写,再到数据库的管理,一人可以搞定一个公司网站的所有事情,真正实现全栈开发,让你升职加薪不是梦!
【分享】你的元素居中对齐了吗?——关于 'text-align:center' 的问题
昨天在论坛里溜达的时候,发现有同学遇到了居中的问题,页面在 IE 里居中对齐好好的,为什么在其他浏览器里面就不灵了呢?rnrn 我曾经也在写一个 JS 日历的时候也被居中弄的焦头烂额,苦不堪言。想必不少人都遇到过这个问题吧。rnrn 我大致看了一下,发现是 “text-align:center” 的兼容性引起的。下面就这个问题跟大家分享一点我的经验。rnrn 先来看看 W3C 标准中是怎么说的。rnrn 在[url=http://www.w3.org/TR/CSS21/text.html#alignment-prop]W3C CSS2.1规范第16.2节[/url] 对text-align 有详细地描述:rn------------------------------------------rn值: left | right | center | justify | inheritrn初始值:匿名值,由'direction'的值而定,如果'direction'为'ltr'则为'left',如果'direction'为'rtl'则为'right'。rn应用于: 块级元素,表格单元格,行内块元素rn继承性: 是rn计算后的值:初始值或指定值rn------------------------------------------rnrn 这个特性描述了如何使一个块元素的[b]行内内容[/b]对齐。rnrn 注意一点,标准里说这个属性是用来对齐[b]行内内容[/b]的,所以,[b]不[/b]应该对块级内容起作用。rnrn 解释一下,[b]行内内容[/b]是说由[b]行内元素[/b]组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素;[b]块级内容[/b]跟则是由块级元素构成,DIV 是最常用的块级元素。块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。rnrn 这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。猜猜是哪个浏览器这么特立独行啊? IE!!rnrn [b]IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。[/b]rnrn 解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。rnrn 若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”:rn[code=HTML]rn rn rn rn textrn rn[/code]rn
关于text-align:center的浏览器兼容问题
最近在做页面的时候,发现text-align:center在有些浏览器下并没有成功发挥作用,这才发现原来text-align:center也存在浏览器兼容性问题。
CSS设置居中
一.水平居中 1.inline   使用padding 2.block (1)单个block     设置width,使用margin:0 auto; (2)多个block     可使用flex     display:flex;     justify-content:center;  (关于flex语法http://www.ruanyifeng.com/blog/2015
css之居中设置
一、水平居中设置 1、行内元素 如果是行内元素(如:文本、图片时),水平居中是通过给父元素的样式添加text-align:center; 2、块状元素(此时text-align:center不起作用) a、定宽块状元素 可通过属性margin:10px auto;来使该元素居中显示,该元素必须得有宽度,否则margin不起作用,二者缺一不可。 b、不定宽块状元素 1)、加入table
css图片设置居中
display:none  隐藏 display:block  显示 伪类target  锁定锚点 IE很多不支持margin值居中,可以在后面或者设置text-align:center; 图片或文字在auto值居中,后缀加text-align:center; 布局:
CSS居中设置
方法一:父级元素position: relative子元素position: absolute;top:50%;left: 50%;margin-left: -(子元素width/2);margin-top: -(子元素height/2); 1 &amp;lt;!DOCTYPE html&amp;gt; 2 &amp;lt;html&amp;gt; 3 &amp;lt;head&amp;gt; 4 &amp;lt;meta charset...
**CSS的字体居中怎么控制**
如下代码:rntestrn我怎样才能把test在垂直方向上居中显示?
css设置居中
水平垂直居中 vertical-aligh: middle最常见垂直居中方法 前提条件:display:inline-block .out{ width: 300px; height: 300px } .in{ width: 50%; height: 50%; ...
align="center"和text-align:center这2个都无效如何居中
页面全部用的 标签,但是在页面里面用align="center"或者在CSS里面用text-align:center都没办法让页面居中。浏览器是手机浏览器。请问下还有别的办法让 标签居中吗?
求助:为什么我用css设置的第二个标签无法居中
p标签都没有问题,但是b标签无法居中,这是什么问题呢?求解rn源代码如下:rnrn rn css设置rn rn rn bbbbbbrn aaaaarn
text-align,vertical-align,line-height居中布局
text-align,vertical-align,line-height居中布局笔记
css的text-align属性问题
刚才在w3上学css,text-align属性的justify值,我试了试好像和left值效果一样,为什么呢,我用的是360安全浏览器!
[DIV/CSS] [译]CSS 居中(Center)方法大合集
水平居中 行内元素 对于行内元素(inline)或复合行内元素(inline-*),直接为其父元素设置文本居中即可。 .center-children { text-align: center; }http://www.ynmxzx.com/rzjw/20160622/3739.html 复制代码 http://codepen.io/chriscoyier/
关于使用text-align:center没效果的问题
我打了下面这段代码&amp;lt;style&amp;gt; p { text-align: center; } &amp;lt;/style&amp;gt;然而p里的字体并没有居中显示,原因是p为块状元素,所以只需要在p的css代码里设置display:inline-block,将块状元素转为内联元素即可。对于块状元素也可以使用margin:0 auto;来控制居中。&amp;lt;style&amp;gt; ...
居中布局(Center)
<p>n <span style="font-size:24px;">本课程主要介绍Dart,以及Flutter的核心知识。主语包括Dart语言的基本语法、循环、条件、函数、类、异常、以及其他高级特性。Flutter主要用于开发跨平台Android App和iOS App。主要包括Flutter的安装,Flutter布局,常用组件、Android和iOS风格的组件、手势、图像、网络、数据库等核心操作。</span>n</p>
div设置text-align无法2实现文字居中
div设置text-align无法2实现文字居中 有种情况是没有设置line-height 比如,需要加上 line-height: 50px;才有效果 .cin_top{ height: 50px; color: #000; font-weight: bold; font-size: 18px; margin-bottom: 5px; line-hei...
为什么text-align:center 这一行实现不了?
![图片说明](https://img-ask.csdn.net/upload/201811/29/1543497801_926640.jpg)
三个div实现跨浏览器的text-align:center的效果
&amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;&amp;gt; &amp;lt;HTML&amp;gt; &amp;lt;BODY style=&quot;text-align:center;&quot;&amp;gt; &amp;lt;!--body的样式中的:text-align:center,在ff中只能作用到DIV标签上。但是能够作用到div内部的元素中,是DIV内...
CSS text-align图片文字内容居左 居右 居中
CSS text-align之CSS居中(text-align:center)、CSS内容居左(text-align:left)、CSS文字居右(text-align:right)样式属性篇,图片、文字内容对齐 居中 居左 居右篇   text-align语法: text-align : left | right | center | justify text-align参数值与说明: lef...
父元素text-align: center对inline-block子元素的影响
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;style&amp;gt; *{margin: 0;p
android设置Button字体居中
android:gravity="center" ;都是这么设置的啊,但是为什么显示的却是居中偏右呢?
如何设置字体居中上下滚动?
用下列javascript能使字体滚动,但老是左对齐,如何实现居中对齐滚动?rnrn rn 通知rn rn 链接一 rn rn 链接二 rn rn 链接三 rn rn 链接四 rn rn rn rnrn
css实用技巧之设置元素居中
CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。 内联元素居中 水平居中设置: 行内元素 设置 text-align:center; 垂直居中设置: 父元素高度确定的单行文本(内联元素) 设置 height = line-height; 父元
css中的居中设置问题
在容器控件中用CSS设置了TEXT-ALIGN居中对齐以后,是容器中的元素居中对齐还是容器本身对齐,还是容器本身居中对齐加容器中的内容居中对齐?
css设置居中的常见情况
css中常见的居中方法
css设置背景居中的问题
我的一个DIV 宽500PX 高500PXrn设置背景图片,rn我要让背景图片在DIV正中居中 怎么搞?
css设置字体样式
font-family: 字体类型 (隶属,宋体,新罗马,…) 该字体类型设置 依赖于 当前操作系统中 已安装的字体 库, 如果 所设置的 字体类型 在 系统中能 查到, 则 启用该字体 如果 所设置的字体 类型 在 系统中 找不到, 则 使用默认字体 字体类型名称 如果 包含空格 , 字体名称需要 用 引号 引住, 汉字一般也用引号引住 font-size : 字体大小 可以设置的单位 : 按百...
css中字体的设置
/*font-family:文本字体名称 font-style:文本样式 font-variant:文本是否为小型大写字母大小写 font-weight:设置文本的粗细 font-stretch:文本是否横向的拉伸变形 font-size:文本字号大小写 src:自定义字体的相对路径或绝对路径,此属性只能在@font-face中使用*/ p[lang="a"]{ font-fami
css字体样式设置
css字体样式设置 font-size:字号大小 font-weight:字体粗细 属性 normal、bold、bolder、lighter、100~900(100的整数倍) 数字 400 等价于 normal,而 700 等价于 bold font-style:字体风格 属性: normal:默认值,浏览器会显示标准的字体...
CSS设置文字字体
CSS设置文字字体           与word类似,CSS也可以对文字的字体、大小和颜色等各种属性进行设置。           CSS的文字字体           在语言中,文字的字体通过来设置,而在CSS中字体则是通过font-family属性来控制。           Font-family属性,可以同时声明任意种字体,字体之间使用逗号隔开,此外,一些字体的名称中间会
css设置字体的方式
css设置字头的方式: 示例代码 &amp;lt;div id=&quot;font&quot;&amp;gt; &amp;lt;a class=&quot;font&quot;&amp;gt;字体&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; 方法一:操作div下的 a标签 #font a{ font-size:xxx; font-family:xxx体; } 方法二:直接给a标签添加属性class = “font” ,然...
CSS设置字体
1、设置字体类型: 设置文本字体为宋体:font-family:&quot;宋体&quot;; 2、设置字体大小: 设置字体大小为16:font-size:16px;或者font-size 16em或者font-size:160% 3、设置字体样式: 设置字体倾斜:font-style:italic; 4、设置字体粗细: 设置字体变粗:font-weight:bold; 解释font常见属性: -----------...
jQuery 中的center居中方法
[code=&quot;js&quot;] jQuery.fn.center = function(f) { return this.each(function(){ var p = f===false?document.body:this.parentNode; if ( p.nodeName.toLowerCase()!= &quot;body&quot; &amp;&amp; jQuery.css(p,&quot;...
float:center实现 居中浮动
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&amp;gt;&amp;lt;html xml:lang=&quot;zh-cn&quot; lang=&quot;zh-cn&quot; dir=&quot;ltr&quot; xmlns=&quot;http://www.w3.org/
line-height ~ text-align 文本居中与垂直居中 | div水平垂直居中
1 @{ Layout = null; } Index #nav { width: 450px; height: 40px; background-color: #808080; margin: 0 auto; }
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制