html - flex 容器中图像下的中心文本

Question

我知道 This Question还有很多人喜欢它。我审查了几个与我的情况类似的边缘案例，但我尝试过的修复都没有奏效。

我有图片和文字。我希望文本在图像下方居中。我得到的是该段落始终与图像的左边缘对齐并向右增长，而不是像下图那样以图像为中心。图片本身在每条边上都有等宽的透明边框，您可以通过知道段落的左边缘与图片的左边缘对齐(它非常小)来确定边框的大小。

body {
  background: gray;
}

#myLinks {
  margin: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  width: 100vw;
  height: 10vh;
  background: black;
  justify-content: space-around;
}

.menu-card {
  height: 15vh;
  width: 5vw;
  margin: 0;
  margin-left: 16%;
  border-radius: 45px;
  border: none;
  padding: 0;
}

.menu-icon-container {
  width: 100%;
  vertical-align: top;
  display: inline-block;
}

.menu-icon {
  max-height: 10vh;
  max-width: 5vw;
}

.card-text {
  position: relative;
  margin: 0;
  margin-top: 100%;
  font-weight: bold;
  font-size: 1.2vw;
  text-align: center;
  border-radius: 45px;
  color: white;
  display: block;
}

<div id="myLinks">
  <div class="menu-card">
    <div class="menu-icon-container">
      <a href="#">
        <img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
        <p class="card-text">Portfolio</p>
      </a>
    </div>
  </div>
</div>

Answer 1

您可以使用 ma​​rgin:auto 来解决这个问题。添加类 .center-items 到具有以下属性的图像的父 a 标签:

.center-items > img,p {
  display : block;
  margin : auto ;
}

body {
  background: gray;
}

#myLinks {
  margin: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  width: 100vw;
  height: 10vh;
  background: black;
  justify-content: space-around;
}

.menu-card {
  height: 15vh;
  width: 50px;
  margin: 0;
  margin-left: 16%;
  border-radius: 45px;
  border: none;
  padding: 0;
}

.menu-icon-container {
  width: 100%;
  vertical-align: top;
  display: inline-block;
}

.menu-icon {
  max-height: 10vh;
  max-width: 5vw;
}

.card-text {
  position: relative;
  margin: 0;
  margin-top: 100%;
  font-weight: bold;
  font-size: 1.2vw;
  text-align: center;
  border-radius: 45px;
  color: white;
  display: block;
}
.center-items > img,p {
display : block;
  margin : auto ;
}

<div id="myLinks">
  <div class="menu-card">
    <div class="menu-icon-container">
      <a href="#" class="center-items">
        <img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
        <p class="card-text">Portfolio</p>
      </a>
    </div>
  </div>
</div>