html - 将图像定位在两个 div 的中间 - css

Question

我有一个小问题，我试图在两个 div 之间放置一个图像，但是当我执行 margin: 0 auto; 它什么都不做，所以我执行 display:block; 然后它把我的 div 弄乱了，我的 slider 在底部。

site messed up

当我删除 display:block 时，它不会弄乱 slider ，并且 div 不会下降，当我添加它时，它会执行您在上面看到的操作。所以我试着向左浮动，但它修复了它，但随后图像向左移动。所以然后我尝试了 margin-left: 50% 然后它向右移动所以我添加了 display: block 并且它再次搞砸了。我在其他人的帖子中读到他们确实 overflow:hidden; 但这也不起作用。这是我的代码:

html:

    <div id="siteheader">
            <!-- this is the first div that is to the left -->
            <div id="sitetitle" class="left">
                ...
            </div>
             <!-- this is the image i need in the middle -->
               <img id="headerlogo" src="http://barkitv.com/barki/wp-content/uploads/2016/01/new-logo-copy.png" height="40" width="40">

            <!-- this is the second div that is to the right -->
            <div class="signinmenu">
                <ul>...</ul></div>


            </div>
        </div>

CSS:

/* this class was applied to the div with the id of sitetitle */
.left {
float: left;
}

#siteheader > div.signinmenu {
    width: fit-content;
    float: right;
    height: 30px;
    padding-right: 20px;
    padding-top: 20px;
}

#siteheader {
    height: 85px;
    width: 100%;
    background: #8b4517;
}

要更好地查看和更好地编辑它，请访问 barkitv.com/barki

(我在检查元素中做了所有这些，所以我没有代码)

主要问题是 display:block; 当我将它添加到 id 为 headerlogo 的图像时，它会将 signinmenu 从标题栏内部向下移动，我希望它保留，并且它会移动 slider 向下。

谢谢

Answer 1

将您的 img 包裹在一个 div 中，然后将该 div 绝对定位在您的其他两个之间。

调整您的 HTML:

<div id="imgDiv">
    <img id="headerlogo" src="http://barkitv.com/barki/wp-content/uploads/2016/01/new-logo-copy.png" height="40" width="40">
</div>

添加到 CSS:

#imgDiv {
  position: absolute;
  top: 22.5px;
  left: calc(50vw - 20px);
  width: 40px;
}