Question

我是 html、css 新手，例如 .. 我正在练习 atm，并尝试制作个人网站/博客。目前我正在博客模板 html 文档中编写“作者信息”部分。

在 CSS 中，我无法水平对齐 div 元素中的元素。我试过检查其他答案和问题，但似乎没有一个对我有用。

我已将代码粘贴在下面。我已将所有内容都包含在 .blog__info__author div 元素中。我想居中的是：#blog__info__author__avatar、.blog__info__author__name、.blog__info__author__date-read、.blog__info__share。

谁能帮忙？大声笑，我知道代码可能不是完美的 atm，仍在练习和清理。试错你知道..

.blog__info__author {
  float: left;
  height: 50px;
  width: 100%;
  background: salmon;
}

#blog__info__author__avatar {
  border-radius: 50%;
  height: 100%;
  float: left;
}

.blog__info__author__name {
  color: rgb(146, 146, 146);
  font-weight: 400;
  font-size: 12px;
  float: left;
}

.blog__info__author__date-read {
  color: rgb(146, 146, 146);
  font-weight: 100;
  font-size: 12px;
  float: left;
}

.blog__info__share {
  float: right;
}

Answer 1

尝试将其添加到您想要居中的元素：

.container {
    ...
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div元素中的水平对齐内容

1 个答案: