CSS中不定宽块状元素的水平居中显示

本文介绍了在CSS中如何使不定宽的块状元素水平居中,详细讲解了通过table标签、浮动和相对定位相结合的方法。通过实例代码分析,解释了父元素设置float、position及left属性,以及子元素相应设置来实现居中的原理。同时,探讨了float属性对元素布局的影响,以及如何将块状元素转换为内联块状元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

慕课网上的HTML/CSS教程

http://www.imooc.com/view/9

其中有三种方法

第一种是加入table标签

任务是实现div元素的水平居中,

初始代码如下

<div>
  设置我所在的div容器水平居中  
</div>

使用table标签实现的代码如下

<table>
 <tbody>
   <tr><td><div>
  设置我所在的div容器水平居中  
</div>
</td></tr>
 </tbody>
</table>


第二种方法是将其设置为内联元素,通过父类来修改

即在上面的初始代码里添加类来实现居中

<div class="wrap">
  设置我所在的div容器水平居中  
</div>

css代码

<style>
.wrap{text-align:center;}
</style>

第三种方法在慕课网上讲解的有点绕,着重讲一下

下面一段话是摘抄与慕课网

【1】【方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
      我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。】

给出的代码如下

<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
    float:left;
 
	position:relative;
	left:50%
}

.container ul{
	list-style:none;
    
	margin:0;
	padding:0;
	
	position:relative;
	left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;
}

</style>
</head>

<body>
<div class="container">
	<ul>
    	<li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

先不用管其中的float:left

上面的代码先来分析style部分,为了直观的展现出left:50,left:-50,在每个类中添加border,如下

<style>
.container{
    float:left;
    border:2px red solid;
	position:relative;
	left:50%
}

.container ul{
	list-style:none;
    border:2px blue solid;
	margin:0;
	padding:0;
	
	position:relative;
	left:-50%;
}
.container li{float:left;display:inline;margin-right:20px;
border:2px green solid;
}

</style>

显示的结果图如下


红色的为第一层,即div层,向右偏移了50%,起点变成了中间线,并不是居中显示;

然后是蓝色的ul层,相对于div层向左偏移50%,这里假设ul没充满,如上图,ul是相对于中间线偏移自身50%,即ul层是居中的;

最后来看li,也就是绿色的那层,li是写在ul里的,当然是居中的了,至于其是container的子类,我觉得没有必要


不过上面令我奇怪的是float,因为li是块状元素,1,2,3应该是分别独立于三行的,当我将display:inline删除的时候,发现仍然没有什么改变,于是查了float的知识,

特摘抄于下

【2】【设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:left后,才允许同行显示。
设了display:inline的元素,允许它的前后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示,则要让前面的元素浮动(不管是左还是右浮动)或设为display:inline,还有代码在后面的是块元素(管它有没有浮动,是左浮动还是右浮动),均不能与之同行,除非设为display:inline。】


课程最后也提到了float,使用此标签的元素变为inline-block,即内联块状元素


参考

【1http://www.imooc.com/code/6365

【2】http://zhidao.baidu.com/question/253828906.html



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值