html元素水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

老鼠拧刀满街找猫

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量522

点赞数

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/LinBilin_/article/details/52932490

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

一、行内元素水平居中

方法：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

如下：

<body>
<div class="center"><span>行内元素在父容器中水平居中显示。</span></div>
</body>

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

效果：

二、块状元素水平居中

当被设置元素为块状元素时，text-align:center 就不起作用了，此时分两种情况：定宽块状元素和不定宽块状元素。

1、定宽块状元素（块状元素的宽度width为固定值）

方法：满足定宽和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中

如下：

<body>
<div>定宽块状元素水平居中。</div>
</body>

<style>
div{
    border:1px solid red;
	margin:20px auto;
	width:200px;/*宽度为固定值，不能写百分比*/
}
</style>

效果：

2、块状不定宽元素

方法：

①设置 margin:0 auto; display:table;

②设置display:inline方法。改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果

③设置position:relative;left:50%，利用相对定位的方式，将元素向左偏移50%。通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中

方法①如下：

<div class="wrap">
  不定宽块状元素水平居中  
</div>

.wrap{
    background:#ccc;
    margin:0 auto;
    display:table;
}

方法②如下：

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

<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>

方法③如下：

<div class="wrap">
    <div class="wrap-center">不定宽块状元素水平居中。</div>
</div>

.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    
}
.wrap{
    float:left;
    position:relative;
    left:50%;
    
}

老鼠拧刀满街找猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html元素水平居中

一、行内元素水平居中方法：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下：行内元素在父容器中水平居中显示。div{ border:1px solid ; margin:20px;}.center{ text-align:center;}效果：二、块状元素水平居中当被设
复制链接

扫一扫

专栏目录