Charlie Fish Charlie Fish - 7 months ago 36
CSS Question

CSS Center Image Horizontally Inline Dynamic Width Parent

I'm trying to center an image horizontally inside of a

that has a width of
. Currently I have two images on either side that will act as buttons that have a
float: left;
float: right;

All of the solutions I have tried have said to make the image
display: block
but that won't allow me to have the buttons on either side.

Here is the Codepen Example of my current code. I'm trying to center the image that has the class
within the div with the class

Any ideas of how I would center that image?


Use flexbox and change your CSS rule for .main like this:

.main {
  display: flex;
  justify-content: space-between;
  background: black;
  height: 550px;

display: flex; will distribute the three items across the width, justify-content: space-between; will make sure the outer items remain at the outside positions.