如何使此徽标图像以相同的水平对齐方式位于页眉的中心？

Question

我正在尝试将此徽标对齐在页面中央，位于页眉中链接的两个部分之间。我在一个单独的 div 中有图像，两边都有一个无序列表，左浮动和右浮动。不确定顺序或嵌套是否正确，对 CSS 和 HTML 来说仍然很新。出于某种原因，徽标位于标题链接行的上方，我希望它们全部水平对齐，徽标也垂直对齐。

我尝试使用 text-align: center on the div with logo which center it on the page, but placing it above the header and social links.我还尝试将它放在 header_main div 中的无序列表之前、之后和之间，但没有成功。

Answer 1

因为他们在两个不同的dev中，你需要在uls之间移动mainLogo dev。或使其位置绝对。

Answer 2

我没有图片所以我只是给出一个缩写。从这个问题我知道你想在导航栏中居中放置标志。 为此，您可以使用名为 flexbox 的 css 属性。 将 css 属性添加到父类，如-

.container-fluid{
display:flex; //css property for alignments
justify-content:space-between; //gives space between child elements
align-items:center; //vertically aligns the elements in the center
}

<div class="container-fluid">
<ul>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Portfolio</a></li>
</ul>
<img src="images/logo" alt="you image" >
<ul>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Portfolio</a></li>
</ul>