css样式中 li如何居中?

html-css06

css样式中 li如何居中?,第1张

1.文字居中定义

文字居中始终是要的,所以首先给予ul外层div一个text-align(文本对齐:居中),还可以给一个“溢位:隐藏(overflow: hidden)”,当然也可以定义一下高和宽。

2.ul定义

ul不能定义宽度,我们只能给一个定位,类型为相对(position: relative),置入左为50%(left: 50%),当然也可以给一个浮动。请注意,ul千万不能用溢位:隐藏(overflow: hidden),这样,部分li就无法显示。

3.li定义

li的定义跟ul差不多,宽度不固定,同样给一个定位,类型为相对(position: relative),置入右为50%(right: 50%),恰恰和ul相反,这样定义后li就可以无论分页多少始终居中了。

1.首先,打开HTML编辑器并创建一个新的HTML文件,比如index。说明:html,用于填写代码的基本层次的问题。-

2.在index.html中的<style>标签中,将“.shoucang .sc_ul li”中的“height: 73px”调整为:height: 73pxpadding-top: 7px。

3.最后,浏览器运行index.html页面,发现li标记中的文本垂直和水平居中。

扩展资料:

其他代码:

Thecodeisasfollows:

<style type = "text/CSS" >

.Shoucang{

Width:58px;

Height:300px;

Float:correct;

Background-color:#CCC;

Border:1pxentity#999;

.Shoucang.Sc_ul{

Width:21px;

Margin-right:car;

Margin-left:car;

Thelist-style-type:no;

Padding-top:20px;

Padding-right:0px;

Padding-bottom:0px;

Padding-left:0px;

Margin-top:0px;

Margin-bottom:0px;

.Shoucang.Sc_ulli{

Thetext-align:center;

Vertical-align:intermediate;

Height:80px;

Width:21px;

Margin-bottom:9px;

Color:#FFF.

Textmodification:no;

Thetext-align:center;

Vertical-align:intermediate;

Background-color:#FF0000;

Fontsize:12px;

Border:1pxentity#666;

-->

></ style

</ a >

The <body >

<div class = "shoucang" >

<ul class = "sc_ul" ><li >set as home </ li ><li >lee </ >

<li class = "no" >contact way lee </ a >

</ ul >

通常情况li上加float:left是为了让标签并排显示,如果不加的话默认就是换行的

而上面加position: relativeleft: -50%这个可能是写代码的人想让每个标签都向左移动一半的位置,有点像是书页或者纸张层叠的效果,也许可以不用相对定位来处理,可以加例如margin-left:-100px一样可以达到效果,只不过这样需要把li的宽度固定,要不然就效果不太好了

再来说一下让标签居中的样式好了,其实上面加的<ul style="position: relativeleft: 50%float:left">有点问题,加了position: relativeleft: 50%就没必要加 float:left了而且应该是无效的

还有就是position: relativeleft: 50%并不能达到真正居中的效果,因为这样加只是以标签的左边线为中心,实质效果是标签是偏右的,如果非要让标签用position来实现居中的话,那么就应该是下面这种样式,例如:<div style="position:absoluteleft:50%top:50%width:200pxheight:100pxmargin-left:-100pxmargin-top:-50pxbackground:red"></div>

你把这段标签直接放入body中试试就能看到了,div是绝对处于浏览器的居中位置

不过建议如果你想让标签居中,还是使用常用方法吧margin:0 auto,尽量少用position属性来设定,