Manipulating image position using CSS

Introduction

Centering an image alongside text in a container might seem straightforward, but dealing with the differences between block and inline elements often complicates the task. While it's easy to position these elements separately, combining them can present unexpected challenges. I recently encountered this issue when trying to align an image to the left and center the heading within the same container. After experimenting with outdated techniques like float, I turned to modern CSS tools like Flexbox to find a cleaner, more efficient solution. This article explores my approach and the lessons learned along the way.

The challenge

The text I was using was my site heading with the HTML element <h1. which is a block-level element, which means that it doesn't play nice with other elements on the same line. It starts on a new line and needs to take up the entire line. Whereas the <img> element is an inline element which means it is happy to play with others on the same line. Of course, I could play with the CSS float property, but there is a problem. The moment I introduce float for an element, it takes that element out of the document flow. and it becomes hard to control the behavior of that element.

Options

As mentioned earlier, I tried using float: left and float: inline-start, but it doesn't always behave as I want. As a best practice, I try to use the latest techniques as much as possible and that's where the modern flex and CSS GridBox came in. Flexbox when assigned to the parent container, aligns all the content text to the left as shown below.

After a lot of trial and error, it came down to using specificity and going minimalist. I also wanted to have the option to style images that I might use on the site independently so I didn't apply any styling to the core img element. I created several classes to manipulate the images and applied those. During all this trial and error, another problem vexed me. I couldn't get the image to align to the middle of the parent container with all the techniques I knew. I researched and tried with align-self property. That finally worked. I didn't want to apply this to the core img element and I didn't want to create a class for this so I used the Child Combinator to target the specific img element which is a child of header element (header > img). That took care of the issue of image alignment.

The next issue was to align the header text in the center. I tried all the tricks I knew with text-align, align-self, align-items, justify-self, and justify-items. But because the parent header element was marked as flex, the subsequent styles didn't apply. Finally I tried a simple trick to center the content using margin: auto and that did the trick. Here's how the final output looks now.

Even when I change the height of the header container, the image and text are vertically in the middle of the element and stay where there on the x-axis.

Final code

HTML code:

<header class="flexi">
  <img class="round-img small" src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar" />
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

CSS code:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

The full code is on my Github repo. Feel free to use it.

Conclusion:

Achieving the perfect alignment of images and text in web design often requires experimenting with different CSS techniques. In this case, Flexbox proved to be the most efficient and modern solution for centering content within a container, while maintaining the flexibility to adjust styling independently. By using targeted selectors like the Child Combinator and leveraging Flexbox’s alignment properties, I was able to solve the issue cleanly and efficiently. This method not only streamlines the code but also ensures that future adjustments will be easier to manage. CSS can be tricky, but with the right approach, you can create polished, professional layouts.