如何在图像下方居中文本[重复]答案

【问题标题】：How to center text below image [duplicate]如何在图像下方居中文本[重复]
【发布时间】：2021-05-29 08:32:39
【问题描述】：

我想将我的图像居中略高于页面中心，同时将文本置于其正下方。

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;
    
}

【问题讨论】：

帮我一个忙，将您的图片托管在 imgbb.com 上，以便我可以通过代码 sn-p 查看它，谢谢。

标签： css

【解决方案1】：

应该能够使用一些text-align 和一些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>

【讨论】：

【解决方案2】：

只需将您的图片和文字放在另一个容器中即可。然后为该容器而不是图像创建样式中心。

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>

【讨论】：

【解决方案3】：

/* 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>

【讨论】：