前端关于居中问题-白红宇

前端关于居中问题

阅读量：4342 次

发布时间：2019-06-07

本文共 919 字，大约阅读时间需要 3 分钟。

这两天在仿京东商城，发现居中这个问题困扰死我了，首先来看下margin:0 auto；只有块级元素才能用这个，并且只是水平居中；

其次是父级元素如果设置了高，子元素也设置了高，此时只要子元素的行高line-height=height，子元素的内容就会垂直居中；

vertical-align:middle，把此元素放置在父元素的中部。所以可以设置此元素的垂直对其方式，比如设置图片和文字居中，

img{vertical-align:center}

<p><img src="">此图片位于文字中的图像</p>

此时图片就会中心跟文字对齐。

所以说如果块级元素设置vertical-align:center,它会与它的文字内容垂直居中。

img是inline-block元素。所以说设置了inline-block的元素设置vertical-align:center，它会与它的文字内容垂直对齐。

text-align:center:这个是设置文字内容水平居中，当然如果父元素是块级元素，子元素是行内元素设置了display:inline-block的话，这个子元素一样可以水平居中于父元素。

下面例子就是a可以水平居中于p，并且text-align是可以继承的，所有可以直接给父元素设置子元素就不用设置了。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

width: 300px;

height: 400px;

border: 1px solid red;

text-align: center;

}

a{display: inline-block;width: 40px;

height: 50px;

border: 1px solid black;}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

转载于:https://www.cnblogs.com/gdfyh/p/6725086.html

你可能感兴趣的文章