How to align text below an image in CSS

Question

HTML     lt div class  image1  gt     lt img src  images img1 png  width  250  height  444  alt  Screen 1   gt       lt img src  images img2 png  width  250  height  444  alt  Screen 2   gt                 lt img src     images img3 png  width  250  height  444  alt  Screen 3   gt     lt  div gt    If I add a paragraph text between img1 and img2 they get separated  img2 goes to a newline   What I m attempting to do is this  with some space between the images      image1   image2   image3    text     text     text    I haven t given the images their own individual class names because the images don t align horizontally to one another

User · Answer

I created a jsfiddle for you here  JSFiddle HTML  amp  CSS Example  CSS  div raspberry       float  left      margin  2px     div p       text-align  center      HTML  apply CSS above to get what you need    lt div gt       lt div class    raspberry  gt           lt img src  http   31 media tumblr com tumblr lwlpl7ZE4z1r8f9ino1 500 jpg  width  100  height  100  alt  Screen 2   gt           lt p gt Raspberry  lt br gt  For You  lt  p gt       lt  div gt       lt div class    raspberry  gt           lt img src  http   31 media tumblr com tumblr lwlpl7ZE4z1r8f9ino1 500 jpg  width  100  height  100  alt  Screen 3   gt           lt p gt Raspberry  lt br gt  For You  lt  p gt       lt  div gt       lt div class    raspberry  gt           lt img src  http   31 media tumblr com tumblr lwlpl7ZE4z1r8f9ino1 500 jpg  width  100  height  100  alt  Screen 3   gt           lt p gt Raspberry  lt br gt  For You  lt  p gt       lt  div gt   lt  div gt

User · Answer

Add a container div for the image and the caption    lt div class  item  gt       lt img src     gt       lt span class  caption  gt Text below the image lt  span gt   lt  div gt    Then  with a bit of CSS  you can make an automatically wrapping image gallery   div item       vertical-align  top      display  inline-block      text-align  center      width  120px    img       width  100px      height  100px      background-color  grey     caption       display  block       x000D   x000D  div item   x000D         To correctly align image  regardless of content height     x000D      vertical-align  top  x000D      display  inline-block  x000D         To horizontally center images and caption    x000D      text-align  center  x000D         The width of the container also implies margin around the images     x000D      width  120px  x000D    x000D  img   x000D      width  100px  x000D      height  100px  x000D      background-color  grey  x000D    x000D   caption   x000D         Make the caption a block so it occupies its own line     x000D      display  block  x000D    x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt Text below the image lt  span gt  x000D   lt  div gt  x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt Text below the image lt  span gt  x000D   lt  div gt  x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt An even longer text below the image which should take up multiple lines  lt  span gt  x000D   lt  div gt  x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt Text below the image lt  span gt  x000D   lt  div gt  x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt Text below the image lt  span gt  x000D   lt  div gt  x000D   lt div class  item  gt  x000D       lt img src     gt  x000D       lt span class  caption  gt An even longer text below the image which should take up multiple lines  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net ZhLk4 1   Updated answer  Instead of using  anonymous  div and spans  you can also use the HTML5 figure and figcaption elements  The advantage is that these tags add to the semantic structure of the document  Visually there is no difference  but it may  positively  affect the usability and indexability of your pages   The tags are different  but the structure of the code is exactly the same  as you can see in this updated snippet and fiddle    lt figure class  item  gt       lt img src     gt       lt figcaption class  caption  gt Text below the image lt  figcaption gt   lt  figure gt     x000D   x000D  figure item   x000D         To correctly align image  regardless of content height     x000D      vertical-align  top  x000D      display  inline-block  x000D         To horizontally center images and caption    x000D      text-align  center  x000D         The width of the container also implies margin around the images     x000D      width  120px  x000D    x000D  img   x000D      width  100px  x000D      height  100px  x000D      background-color  grey  x000D    x000D   caption   x000D         Make the caption a block so it occupies its own line     x000D      display  block  x000D    x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt Text below the image lt  figcaption gt  x000D   lt  figure gt  x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt Text below the image lt  figcaption gt  x000D   lt  figure gt  x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt An even longer text below the image which should take up multiple lines  lt  figcaption gt  x000D   lt  figure gt  x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt Text below the image lt  figcaption gt  x000D   lt  figure gt  x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt Text below the image lt  figcaption gt  x000D   lt  figure gt  x000D   lt figure class  item  gt  x000D       lt img src     gt  x000D       lt figcaption class  caption  gt An even longer text below the image which should take up multiple lines  lt  figcaption gt  x000D   lt  figure gt  x000D   x000D   x000D    http   jsfiddle net ZhLk4 379

User · Answer

Instead of images i choose background option   HTML      lt div class  class1  gt      lt p gt Some paragraph  Some paragraph  Some paragraph  Some paragraph  Some paragraph       lt  p gt     lt  div gt         lt div class  class2  gt      lt p gt Some paragraph  Some paragraph  Some paragraph  Some paragraph  Some paragraph       lt  p gt     lt  div gt     lt div class  class3  gt      lt p gt Some paragraph  Some paragraph  Some paragraph  Some paragraph  Some paragraph       lt  p gt     lt  div gt            CSS      class1        background  url  Some png   no-repeat top center      text-align  center            class2        background  url  Some2 png   no-repeat top center      text-align  center            class3        background  url  Some3 png   no-repeat top center      text-align  center

User · Answer

Easiest way excpecially if you don t know images widths is to put the caption in it s own div element an define it to be cleared both          lt div class  pics  gt       lt img class  marq  src  pic 1 jpg    gt     lt div class  caption  gt My image 1 lt  div gt   lt  div gt       lt div class  pics  gt         lt img class  marq  src  pic 2 jpg    gt     lt div class  caption  gt My image 2 lt  div gt     lt  div gt         and in style-block define   div caption      float  left    clear  both

User · Answer

Since the default for block elements is to order one on top of the other you should also be able to do this    lt div gt       lt img src  path to img  gt       lt div gt Text Under Image lt  div gt   lt  div  img       display  block

User · Answer

Best way is to wrap the Image and Paragraph text with a DIV and assign a class   Example    lt div class  image1  gt       lt div class  imgWrapper  gt           lt img src  images img1 png  width  250  height  444  alt  Screen 1   gt           lt p gt It s my first Image lt  p gt       lt  div gt                                   lt  div gt

User · Answer

You can use the HTML5 Caption feature

[html] How to align text below an image in CSS?

Examples related to html

Examples related to css