水平居中设置

最新推荐文章于 2021-09-01 16:51:19 发布

superman__007

最新推荐文章于 2021-09-01 16:51:19 发布

阅读量754

点赞数 1

分类专栏： html css

本文链接：https://blog.csdn.net/superman__007/article/details/78018729

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

1、水平居中包括行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

1.1、行内元素的水平居中，像文本、图片等行内元素，水平居中是通过给父元素设置 text-align:center 来实现的。

如下：

<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{
	text-align:center;
}
.imgCenter{
    text-align: center;   
}
</style>
</head>

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>

1.2、定长的块级元素居中。（定宽块状元素：块状元素的宽度width为固定值）满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

如下：

<style>
div{
    border:1px solid red;
	width:200px;
	margin:20px auto;
}

</style>
</head>

<body>
<div>我是定宽块状元素，我要水平居中显示。</div>

1.3、不定宽的块级元素居中。

1.3.1 第一种方式是，使用table标签包裹起来，table标签有自动居中的功能，

如下：两种定义table标签的方式。

<style>
table{
    margin: 0 auto;
}
.wrap{
    background: #ccc;
    /** 设置为table显示也可以实现table标签 */
    display: table; 
    margin: 0 auto;
}
</style>
</head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
	<ul>
    	<li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

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

1.3.2、第二种不定长的块级元素设置居中使用display将块级元素变成行级元素，然后在父元素中设置text-align: center，来实现居中。如下

<style>
.container{text-align:center;background: red;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</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>

1.3.3、第三种不定长的块级元素居中，通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。如下：

<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;}

.wrap{
    float: left;
    position: relative;
    left: 50%;
}
.wrap-center{
    background:#ccc;
    position: relative;
    left: -50%; 
}
</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>
<br/><br/>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>

superman__007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中设置

1、水平居中包括行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。1.1、行内元素的水平居中，像文本、图片等行内元素，水平居中是通过给父元素设置 text-align:center 来实现的。如下：div{ border:1px solid red; margin:20px;}.txtCenter{ text-align:center;}
复制链接

扫一扫