CSS中的垂直对齐机制是怎么回事

qlvxas9a 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(115)

说真的，现在CSS中的垂直对齐功能有什么问题？就像样式表从HTML文档中分离出来一样。我有两个子div parent parent。没有一个垂直对齐功能工作。为什么我不能让它们在父div`内部垂直对齐？说真的，为什么一切都是不可能的？
令人震惊的是，文本水平功能完美地工作了。我知道，为什么会认为CSS中的某些东西实际上是有效的，对吗？我几乎震惊地晕倒，有些东西实际上做了我告诉它做的事情。
此外，这个网站的界面是严重的错误，正如你可以告诉上面，我不能有两个内联代码块在同一行，而不包括写作之间，一些反馈的管理员。

<div class="widget-grid__widget">
    <h3 class="media-title media-title--font-dark-blue" >Text</h3>
    <p class="media-text media-text--font-grey media-text--bold">Text</p>
</div>

<style>
.widget-grid__widget{
    vertical-align: center;
    align-content:center;
}
</style>

css

来源：https://stackoverflow.com/questions/75831303/what-is-the-matter-with-the-vertical-align-mechanism-in-css

1条答案

按热度按时间

dgsult0t1#

父div将自动缩小高度以适应其内容，因此不会出现任何移动。然后将内容居中的最简单方法是将父div设置为网格容器，然后使用place-content: center;。
注意，段落和h1-h6元素，作为块级元素，将其内容向左对齐，因此您还需要应用text-align：中心;这些也
由于应用了默认边距，h3和p元素垂直分隔。
希望这个有用。

.widget-grid__widget{
  border: 1px solid blue; /* just give it a border so you can see the height */
  height: 300px; /* we need to specifically set a height. If not the div will shrink to fit its content */
  display: grid;
  place-content: center;
}

h3, p {
  border: 1px solid red; /* added a border so you can see the extents of these blocks. Note how, being children of a grid container they shrink to size */
  text-align: center;
  /*margin: 0; uncomment this if you want the h3 and p elements to sit together right in the center of the parent */
}

<div class="widget-grid__widget">
  <h3 class="media-title media-title--font-dark-blue">Text</h3>
  <p class="media-text media-text--font-grey media-text--bold">Text</p>
</div>

赞(0）回复(0）举报 2023-03-24

我来回答

CSS中的垂直对齐机制是怎么回事

1条答案

相关问题

热门标签

最新问答