inline-block中居中元素

最新推荐文章于 2024-04-16 18:33:04 发布

千霜

最新推荐文章于 2024-04-16 18:33:04 发布

阅读量6.7k

点赞数 3

分类专栏：前端文章标签： html inline-block 居中

本文链接：https://blog.csdn.net/jdbdh/article/details/81360535

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<span class="a">
	<span class="b">luo</span>
</span>

有这样一个父元素，被显示为inline-block元素，那问题是，如何居中里面的元素呢？

先看看父元素的样式：

	.a{
		display:inline-block;
        text-align:center;
        width:100px;
        height:100px;
        background-color:yellow;
	}

设置了元素内居中，这个设置只会水平居中，下面进行垂直居中：

    .a::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
	}
    .b{
    	display:inline-block;
        vertical-align:middle;
    }

注意到了吗？我们使用的是vertical-align属性，设置成middle。但是问题来了，仅仅设置成这样是没有一点用的，因为vertical-align需要一个参考的对象，因此在前面插入了一些内容来比较。如果将.b中的display删掉，效果也是一样的。

效果：

总的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
	.a{
		display:inline-block;
        text-align:center;
        width:100px;
        height:100px;
        background-color:yellow;
	}
    .a::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
	}
    .b{
    	display:inline-block;
        vertical-align:middle;
    }
</style>
</head>
<body>
<span class="a">
	<span class="b">luo</span>
</span>



</body>
</html>

参考：

https://stackoverflow.com/questions/18485378/vertically-centering-text-within-an-inline-block