Haza Haza - 1 month ago 6
CSS Question

positioning image in the middle of two divs - css

i have a little problem i am trying to position a image in between two divs but when i do

margin: 0 auto;
it does nothing so i do
display:block;
then it messes up my div to the right and my slider at the bottom.

site messed up

when i remove
display:block
it does not mess it up the slider stays and the div does not go down, when i add it, it does what you see above.
so then i tried to float left but it fixs it but then it the image goes to the left.
so then i tryed margin-left: 50% then it goes to the right so i add display: block and it messes it up again. i read in some one elses post that they did
overflow:hidden;
but that did not work either.
here is my code:

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;
}


to see it better and edit it better go to barkitv.com/barki

(I DID ALL OF THIS IN INSPECT ELEMENT SO I HAVE NO CODE)

The main problem is the
display:block;
when i add it to the image with the id of headerlogo it moves the signinmenu down from inside the header bar i want it to stay and also it moves the slider down.

Thank You

Answer

Wrap your img in a div then position that div absolutely between your other two.

Adjust your 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>

Add to CSS:

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