Prevent floated image from moving centered title in div

Question

I currently have a "header" div which contains the title of my site and an image of the product. The title is an h1 (heading) and the image is supposed to be floated to the left. I am centering the heading with text-align: center and using float: left on the image. The problem is that the image takes space and moves my title to the left which makes it look very strange when you compare it to the footer which is correctly centered.

It is possible that this is a duplicate of a common problem but due to my limited knowledge in CSS terms, it makes it very hard to find the answer by a Google search. I've used multiple search phrases but I've yet to find anyone with a similar problem.

I've tried multiple ways such as using position: absolute and similar ways which don't seem to work. I've also tried putting the img and h1 in a different order in the HTML, if I put the image after the heading it will cause the image to "drop down" under the whole div and this looks even odder.

Code (HTML & CSS)

| HTML

<div class="header">

    <img src="assets/image/Logo-small.png">
    <h1>Llama Capture</h1>

</div>

| CSS

.header {
    width: 100%;
    height: 6%;
    text-align: center;
    background-color: black;
 }

.header img {
    height: 100%;
    float: left;
}

I expect the heading to be fully centered just as the footer is and I thought text-align would work without the influence of other elements in the div. The actual result would definitely irritate someone with an eye to detail.

I am thankful for anyone that could point me in the right direction, I might have overlooked this problem and so I'm happy if someone more experienced could share their knowledge on this.

score 1 · Accepted Answer · answered Dec 22 '18 at 18:38

use position:absolute; and left: right: values instead of float:right/left

.header {
  width: 100%;
  background-color: black;
  color:#fff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
 }

.header img {
  height: 100%;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%); 
}

<div class="header">

    <img src="https://picsum.photos/20">
    <h1>Llama Capture</h1>

</div>

Prevent floated image from moving centered title in div

1 Answers1