迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > CSS >

CSS水平居中大全

作者:嫣然 最近更新:2023/05/09 浏览次数:

css的居中有很多情况,不同的情况方法不同,下面总结一下平常用到的居中方法

(1)文本,图片等行内元素的水平居中

给父元素设置text-align:center可以实现文本,图片等行内元素的水平居中,代码如下:

<style>
.wrap{text-align:center;background:#ccc;margin-bottom:10px;color:red;}
</style>
<div class="wrap">Hello word</div>
<div class="wrap"><img src="logo.png" height="129" width="238" alt="" /></div>

效果如下:

2)确定宽度的块级元素的水平居中

确定宽度的块级元素的水平居中是通过设置margin-left:auto;margin-right:auto;来实现的,代码如下

<style>
.wrap{width:500px;height:100px;background:#ccc;}
.test{width:200px;height:50px;background:red;margin:0 auto;}
</style>
<div class="wrap"><div class="test"></div></div>

效果如下 :

(3)不确定宽度的块级元素的水平居中

不确定宽度的块级元素的水平居中有三种实现方式,下面以分页为例子,因为分页的数量是不确定的 ,所以我们不能通过设置宽度来限制他的弹性。

方法一:

<style>
.wrap{background:red;}
ul,li{list-style:none;margin:0;padding:0;}
table{margin-left:auto;margin-right:auto;background:#ccc;}
.test li{float:left;display:inline;margin-right:5px;}
</style>
<div class="wrap">
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
</div>

效果如下:

方法一演示了分别有一个,两个,三个分页的情况下,分页模块都能居中的示例。ul标签是整个分页模块的根元素,它包含的li的数量不确定,所以ul本身的宽度也无法确定,所以不能通过固定宽度设置margin-left和margin-right:auto设置居中,这里用到了一个table来帮助实现不确定宽度的块级元素的水平居中,table有趣的地方是它本身不是块级元素,如果不给它设置宽度的话,它本身的宽度是通过内部元素“撑起”,即使不给它设置宽度,仅设置margin-left:auto, margin-right:auto 来实现居中,间接使ul居中了

方法二:

<style>
ul,li{list-style:none;margin:0;padding:0;}
.wrap{width:500px;height:100px;background:#ccc;}
.test{text-align:center;padding:5px;}
.test li{display:inline;padding-right:10px;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下:

此方法的思路是改变块级元素为line类型,然后通过text-align:center来实现居中,比方法一简单,它的好处是不用添加无语义标签,简化了标签的嵌套深度,但也存在一定的问题:将块级元素转化为inline元素,行内元素比块级元素少一些功能,如设置长宽值,在某些特殊需要的css设置中,可能会带来一些限制。

方法三:

<style>
ul{list-style:none;margin:0;padding:0;}
.wrap{background:#ccc;width:500px;height:100px;}
.test{clear: both;float:left;padding-top:5px;position:relative;left:50%;}
.test li{position:relative;left:-50%;margin-right:5px;float:left;display:inline;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下:

方法三的是给父元素设置float,然后父元素设置position:relative和left:50%;  子元素设置position:relative和left:-50%来实现水平居中,这种方法可以保留块级元素仍以display:block的形式显示,不会增加无语义标签。

希望本文对大家有所帮助。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 居中表格

发布时间:2023/05/05 浏览次数:155 分类:HTML

本篇文章将介绍如何在 HTML 中使表格居中。将 margin 属性设置为 auto 以在 HTML 中将表格居中 使 HTML 表格居中最直接的方法是使用 margin 属性并将其设置为 auto。

覆盖 Bootstrap CSS

发布时间:2023/04/28 浏览次数:59 分类:CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。 我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间:2023/04/28 浏览次数:107 分类:CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间:2023/04/28 浏览次数:123 分类:CSS

在本文中,用户将学习如何为 outline 属性设置圆角,与 border-radius 属性相同。 在这里,我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间:2023/04/28 浏览次数:73 分类:CSS

在本文中,用户将学习仅使用 CSS 将 <video> 元素居中。 我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间:2023/04/28 浏览次数:108 分类:CSS

在本文中,我们将创建多个 HTML 元素并将其显示设置为 inline-block。 之后,我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间:2023/04/28 浏览次数:98 分类:CSS

在本文中,我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框,可改善用户体验。

使用 CSS 向上移动文本

发布时间:2023/04/28 浏览次数:153 分类:CSS

有时,在开发网页时,我们将文本放在底部或页脚中,因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便