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 about 2 years 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 about 2 years ago

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

Val Ery about 2 years 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 about 2 years ago

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

kholis Muhaimin about 2 years ago

Thanks Ryan

digitalkev almost 2 years 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 9 months ago

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

Ruben Wilson 6 months ago

Yes, This is the really best informational post coding is very helpful in the website, I like it. Catpain America Jacket