Manipulating image position using CSS

Introduction

I have been playing with CSS and HTML for quite some and quite frankly, I am surprised that I never faced the issue of centering an image vertically within a container along with text. It is very easy to manipulate the image positioning by itself and to manipulate text positioning. It is also easy to manipulate both together. What I wanted to do was put both the image and text in the same container, left align the image and center align the header.

The challenge

The text I was using was my site heading with the HTML element

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 lazy" src="/static/imghwm/default1.png" data-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.

The above is the detailed content of Manipulating image position using CSS. For more information, please follow other related articles on the PHP Chinese website!