垂直对齐 Div 内的图像和文本答案

【问题标题】：Vertically Align Image and Text Inside a Div垂直对齐 Div 内的图像和文本
【发布时间】：2023-04-04 02:21:01
【问题描述】：

我想定位图像和导航链接，使它们与 HeadContainer 垂直对齐并彼此对齐。

HTML

<header>
<div id="HeadContainer">
  <img src="favicon.png" id="title"/>
  <nav>
    <p>Home</p>
    <p>About</p>
    <p>Portfolio</p>
    <p>Contact</p>
  </nav>
</div>
</header>

CSS：

#HeadContainer {
width:70%;
margin: 0 auto;
display: block;
}

header {
height: 60px;
}

nav {
    float: right;
}

nav p {
    display: inline;
    margin-left: 10px;
    font-size: 1.2em;
}

#title {
    float: left;
    width: 40px;
}

目前它们没有对齐。如何将导航中的段落标签与图像对齐？

【问题讨论】：

有几种方法可以垂直对齐这个集合。 Roko 的答案并不是其中之一，而是依赖于 ul 元素的一个相当偶然的默认上边距，通过将 p 元素设置为 display:inline-block 可以或多或少地复制它。但总的来说，内联元素在流中垂直对齐，彼此在同一行。浮动元素会将它们从流程中移除，因此它们无法自然垂直对齐，您只能使用 padding-top、margin-top、top 等手动将它们轻推到位。

标签： html css alignment

【解决方案1】：

您应该知道，在导航中您几乎不会有 <p> 元素。我也没有看到任何理由谷歌。所以去吧：http://jsbin.com/melag/2/edit

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

nav {
    float: right;
}
nav ul{
    list-style:none;
}
nav ul li{
    display:inline-block;
    vertical-align:middle;
}

【讨论】：

OP，关于垂直对齐您的徽标图像。在您的样式表中，将 'position:relative;top:10x' 添加到 '#title'。
非常感谢！这几天一直困扰着我

【解决方案2】：

Roko 的答案是行之有效的方法。我也推荐它。我想指出，在 HTML 5 中，<nav> 标记旨在替换已修改的导航菜单的无序列表。

W3 Schools <nav> tag page

【讨论】：

谢谢！你的意思是我用错了
标签？我以为我用对了
你用得很好。您实现它的方式是创建导航菜单的“最流行”的方式。然而，较新的 HTML5 规范建议使用新的 <nav> 标记而不是无序列表。基本上，它是官方的“作为导航部分的无序列表”标签。