How to center text below image

Question

I would like to center my image slightly above the center of the page while having the text centered directly below it.

HTML

<div class="center">
            <img src="aboutImages/jay.jpeg" id="art">
            <span class="description">caption</span>
        </div>

CSS

div.center{
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

div img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    height: 320px;
    width: 250px;
    margin-top: 200px;
}
.description{
    display: block;
    
}

Do me a favor and host your image on imgbb.com so that I can view it through a code snippet, thanks. — Love2Code, Feb 27 '21 at 01:15

score 0 · Answer 1 · answered Feb 27 '21 at 01:16

Should be able to handle this with some text-align and some margin-top.

div.center {
  margin-top: 25%;
  text-align: center;
}

.center img{
    max-width: 100%;
    max-height: 100%;
    height: 320px;
    width: 250px;
}

<div class="center">
  <img src="aboutImages/jay.jpeg" id="art">
  <div class="description">caption</div>
</div>

score 0 · Answer 2 · answered Feb 27 '21 at 01:18

Just put your image and text inside another container. And you create styling center for that container instead of image.

div.center{
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.image-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 320px;
    width: 250px;
    margin-top: 200px;
}
div img{
    max-width: 100%;
    max-height: 100%;
    
}
.description{
    display: block;
    
}

<div class="center">
  <div class="image-box">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" id="art">
    <span class="description">caption</span>
  </div>
</div>

score 0 · Answer 3 · answered Feb 27 '21 at 01:22

/* in this example I set the body to 100vh to cover entire screen */

body {
  display: flex;
  height: 100vh;
}


/* center div using margin auto */

div.center {
  display: inline-block;
  text-align: center;
  margin: auto;
}


/* wrap img and desc. in one div */

.wrap {
  display: flex;
  flex-direction: column;
}


/* use margin to offset image */

.description {
  margin-bottom: 100px;
}

div img {
  width: 100px;
}

.description {
  display: block;
}

<div class="center">
  <div class="wrap">
    <img src="https://source.unsplash.com/random/150x150" id="art">
    <span class="description">caption</span>
  </div>
</div>

How to center text below image

3 Answers3