Menu icon Foundation
Center Image inside of column

Hi,

 

How can I center an image inside of a column? Im using Foundation 6 for sites with a flex grid.

 

<div class="row">
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
</div>

 

Thank you!

foundation 6centeredimageflex-grid

Hi,

 

How can I center an image inside of a column? Im using Foundation 6 for sites with a flex grid.

 

<div class="row">
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
  <div class="small-12 medium-4 column">
    <h5> class="title"</h5>
    <img src="../img">
  </div>
</div>

 

Thank you!

Ryan McCready over 1 year ago

Hi there,

You would put the .float-center class right on the image:

`<img src="assets/img/generic/voyager.jpg" class="float-center">`

RCD over 1 year ago

Thanks Ryan, this works on the flex grid as well?

Val Ery over 1 year ago

 Hi!

For flex - http://codepen.io/Val_Ery/full/KgExjB/

Html:

<div class="content">
  <img src="http://image/path" alt="Image" />
</div>

Css:

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

Ryan McCready over 1 year ago

Hey Val, thanks for jumping in - great answer! I guess I missed the Flex Box part :P

kholis Muhaimin over 1 year ago

Thanks Ryan

digitalkev over 1 year ago

Hi there,

You would put the .float-center class right on the image:

`<img src="assets/img/generic/voyager.jpg" class="float-center">`

Thanks Ryan!!

Yurii 3 months ago

I had some problem in this site . Thanks for the information)