Center text under image in flex container

Question

I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.

I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).

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

Thanks to @TheVigilant for putting me on the right path:

.menu-icon-container a {
    width: auto;
    vertical-align: top;
    display: inline-flex;
    justify-content : center;
}

.menu-icon-container > img, p {
    margin: auto;
    display: block;
}

Answer 2

You can use margin:auto to get this fixed. Add a class .center-items to the parent a tag of the image with the following properties :

.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>

Answer 3

it may work.. plz modify the css code..

css

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.menu-card {
    margin: 0px;
    text-align: center;
}