css 图像垂直对齐

0sgqnhkj 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(233)

我正在尝试垂直对齐页眉上的一个图像。这是我的实际代码，我把它水平对齐到中心。

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}

<div class="container">
  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>
</div>

我试着搜索一个解决方案，可以让它垂直对齐中心，但不能让它水平了与文本对齐：
一个二个一个一个
我刚刚开始HTML + CSS，有什么建议吗？

css

来源：https://stackoverflow.com/questions/74890463/vertical-align-of-image

3条答案

按热度按时间

2ul0zpep1#

使用Flexbox，可以将属性justify-content:center添加到flex元素
在这篇css-tricks文章中，你可以找到一个关于如何居中元素的好例子。

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}

<div class="container">

  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>

</div>

赞(0）回复(0）举报 2022-12-24

iaqfqrcu2#

只需添加"调整内容：center '到您的Flex容器。

header {

    background-color: blue;
    height: 118px;
    width: 1024px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{

    margin-left:auto;
    margin-right:auto;
    width: 1024px;

}
img { display:block }

<div class="container">

        <header>
            <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
        </header>

    </div>

赞(0）回复(0）举报 2022-12-24

lvjbypge3#

您必须将justify-content: center;添加到标题中。

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  text-align: center;
  display: flex;
  align-items: center;
}

希望这对你有帮助。

赞(0）回复(0）举报 2022-12-24

我来回答

css 图像垂直对齐

3条答案

相关问题

热门标签

最新问答