CSS常见的居中问题

最新推荐文章于 2024-07-24 16:53:23 发布

Bi_bu

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量338

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/hutongxue434/article/details/107251736

版权

最近经常遇到居中的问题，于是在查找资料后把它们整理了下来和大家分享。
首先居中分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

一、行内元素水平居中

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。
例如：

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

<!--html代码-->
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="xxxx.jpg" /></div>
</body>

二、定宽块状元素水平居中

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

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<!--CSS代码-->
<style>
.father{
    
    border:1px solid red

最低0.47元/天解锁文章

Bi_bu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常见的居中问题

最近经常遇到居中的问题，于是在查找资料后把它们整理了下来和大家分享。首先居中分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。目录一、行内元素水平居中二、定宽块状元素水平居中三、已知宽高实现盒子水平垂直居中四、未知自身宽高实现水平垂直居中一、行内元素水平居中如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父
复制链接

扫一扫