css 如何使这个标志图像坐在中心的标题与相同的水平对齐？

pdsfdshx 于 2023-03-05 发布在其他

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

我试着把这个标志对齐在页面的中间，在页眉的两个链接部分之间。我把这个图像放在一个单独的div中，两边有一个无序的列表，有左浮动和右浮动。不确定顺序或嵌套是否正确，这对CSS和HTML来说还是一个很新的东西。出于某种原因，这个标志位于页眉链接行的上方。我希望他们都是水平对齐，与标志垂直对齐了。
第一节第一节第一节第一节第一节第二节第一节第三节第一节第四节第一节
我尝试使用文本对齐：在div上居中，徽标在页面上居中，但将其放置在标题和社交链接上方。我还尝试将其放置在header_main div中的无序列表之前、之后和之间，但没有成功。

css

来源：https://stackoverflow.com/questions/75633456/how-to-make-this-logo-image-sit-in-the-center-of-the-header-with-the-same-horizo

3条答案

按热度按时间

yhived7q1#

我没有图片，所以我只是给一个缩写。从这个问题我知道，你想在导航栏中心的标志。为此，你可以使用一个CSS属性称为Flexbox。添加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="your 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>

赞(0）回复(0）举报 2023-03-05

k7fdbhmy2#

因为它们位于两个不同的dev中，所以您需要在uls之间移动mainLogo dev，或者使其位置绝对化。

赞(0）回复(0）举报 2023-03-05

pbossiut3#

使用flexbox将标题居中。单击here。

赞(0）回复(0）举报 2023-03-05