Charlie Fish Charlie Fish - 1 year ago 72
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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download