时间戳

首页 > 解决方案 > 如何将 div 与 img 对齐？

html - 如何将 div 与 img 对齐？

问题描述

我希望我的 html 元素是这样的：

线框

但我不知道该怎么做。

我的 html ：

<header>
    <img src="res/LogoMPS.png">
    <h1>Consultation Proface</h1>
    <a id="retourAccueil" href="/MPS">Accueil MPS</a>
</header>

和我的实际 CSS ：

img {
    margin: 0px;
    width: 8%;
    height: auto;
    display: inline-block;
}

h1 {
    font: 40px Arial;
    color: #0448af;
    margin-left: 40px;
    margin-bottom: 60px;
    display: inline-block;
}

#retourAccueil {
    display: block;
}

标签： htmlcss

解决方案

在您的文本周围添加一个div，然后我们将样式应用于该文本。您应该垂直对齐 youimg和 new div。现在仅此一项就可以正常工作，但是文本可能看起来有些偏移，您可以通过删除标签的顶部来解决此margin问题h1。

body {
  font-family: sans-serif;
  font-size: 12px;
}

header img, header div { vertical-align: middle; }

header div {
  padding-left: 2em;
  display: inline-block;
}

h1 {
  margin-top: 0;
}
<header>
  <img src="https://via.placeholder.com/150x100" />
  <div>
    <h1>Consultation Proface</h1>
    <a href="#">Accueil MPS</a>
  </div>
</header>

推荐阅读