Charlie Fish Charlie Fish - 1 month ago 11
CSS Question

CSS Center Image Horizontally Inline Dynamic Width Parent

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

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

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
mainimg
within the div with the class
main
.

Any ideas of how I would center that image?

Answer

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.

http://codepen.io/anon/pen/kkjjJa