CSS中使用inline-block来进行居中的示例

下面详细讲解一下“CSS中使用inline-block来进行居中的示例”的完整攻略。

下面详细讲解一下“CSS中使用inline-block来进行居中的示例”的完整攻略。

确定html结构

首先，需要为元素确定合适的 html 结构。在示例中，我们使用一个 div 元素包裹内部要居中的内容。并给包裹元素设置一个唯一的 class 名称，为 .center。

<div class="center">这里是需要居中的内容</div>

基本样式

然后，需要为元素添加 CSS 样式，我们需要将包裹内来居中的内容设置为 inline-block 显示类型，以支持水平居中。

.center {
  text-align: center;
}
.center > * {
  display: inline-block;
  vertical-align: middle;
}

在这段样式中，我们使用了 text-align 属性来使其居中，同时使用 display:inline-block 及 vertical-align 来让其垂直居中。

示例一

下面是一个实际的应用示例，将一个图片垂直水平居中:

<div class="center">
  <img src="https://picsum.photos/200/300" alt="">
</div>

.center {
  text-align: center;
}
.center > * {
  display: inline-block;
  vertical-align: middle;
}

查看示例

示例二

下面是在一个导航栏中将几个元素居中的应用示例：

<nav>
  <ul class="center">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.center {
  text-align: center;
}
.center > * {
  display: inline-block;
  vertical-align: middle;
}
.center li {
  margin: 0 10px;
}

在这个示例中，我们将导航栏 ul 元素居中，并将每个 li 元素的 margin 设置为 0 10px。

查看示例

总结

通过上面两个示例，可以看出 inline-block 属性在实现元素水平垂直居中的时候，有着很不错的表现。需要注意的是，如果在场景中涉及到了容器的宽高度削弱或者内容换行引起的问题，需要根据实际情况进行调整，这个时候可能需要考虑其他的定位方式或者使用flex布局。