Question

我想知道如何将内联块中心化。有帮助吗？我尝试过做margin-top: x em;，但所做的一切都是让图片失效。这个内联块是故意在图像块内部。如果你有链接向我展示如何定位内联块，我很乐意考虑它们，因为我还在学习如何做CSS和HTML。

＆＃13;

#img-banner article {
  border: solid thick white;
  box-sizing: border-box;
  display: inline-block;
  width: 14em;
  position: static;
}

#img-banner h1 {
  font-family: 'Lobster', cursive;
  text-align: center;
  color: white;
  font-size: 27px;
}

＆＃13;

<span id="img-banner">
    <article>
    <h1>Introduction</h1>
    </article>
    </span>

＆＃13;

Answer 1

包含所包含范围的属性非常重要，因为这是您需要对齐的父级。假设你想要垂直中心你的元素，你需要问问自己是否已知包含元素的高度，这将指导你采用适当的定心技术。

https://css-tricks.com/centering-css-complete-guide/

您将在本网站上找到许多常见的居中技巧。您可以将内联块元素视为块级元素。

就个人而言，我喜欢确保我的容器为position:relative，然后将top:50%; transform: translateY(-50%)添加到我未知的高度定位元素。

修改：如评论中所述，此HTML无效。跨度中仅允许内联元素。我不知道为什么我忽略了这一点。

如何将内联块居中？

1 个答案: