在display flex中，如何居中对齐一个容器的孩子？

问题描述

我知道我现在很笨，当我阅读解决方案时，我会对自己做一个非常大的表情：“当然！”。

1. 我想居中对齐单元格编号，并且希望将单元格图标移到左侧。我不想摆弄位置，因为我也希望它也保持在更大的屏幕上。可以肯定，这是什么快速方法？我正在做腹肌！

2. 为什么不能向上或向下移动单元格图标？我改变了容器的高度，但是什么也没发生。左右是，但不能上下。为什么？

在这里看起来非常糟糕，所以这里是页面：Here the page （以移动方式检查网站，我首先将其建立为移动方式，尚无媒体查询）

谢谢！

.paolo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  padding: 30px 0;
  padding-bottom: 55px;
  margin-bottom: 50px;
}

.iconandname {
  padding: 10px 0;
  text-align: center;
}

.contactname {
  font-size: 50px;
  position: relative;
  top: 5px;
}

.numeroandiconcell {
  width: 50vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cellnumber {
  text-decoration: none;
  color: black;
  font-size: 50px;
  margin-top: 40px;
}

.iconasmartphone {
  position: relative;
  top: 5px;
}

.tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 20px;
}

.chiamaconuntocco {
  font-size: 25px;
}

    <div class="paolo">
        <div class="iconandname">
          <img src="images/paoloicon.svg" class="paoloicon" width="300px" alt="icona ragazzo">
          <h3 class="contactname">Paolo</h3>
        </div>
        <div class="numeroandiconcell">
          <img src="images/smartphone.svg" class="iconasmartphone" width="70px" alt="icona smartphone">
          <a class="cellnumber" href="tel:[phone]">347 592 4197</a>
        </div>
        <div class="tap">
          <img src="images/tap.svg" class="tapicon" width="40px;" alt="icona raffigurante simbolo touch">
          <p class="chiamaconuntocco">Chiama con un tocco</p>
        </div>
      </div>

解决方法

.paolo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  padding: 30px 0;
  padding-bottom: 55px;
  margin-bottom: 50px;
}

.iconandname {
  padding: 10px 0;
  text-align: center;
}

.contactname {
  font-size: 50px;
  position: relative;
  top: 5px;
}

.numeroandiconcell {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cellnumber {
  text-decoration: none;
  color: black;
  font-size: 35px;
}

.iconasmartphone {
  position: relative;
}

.tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 20px;
}

.chiamaconuntocco {
  font-size: 25px;
}

<div class="paolo">
        <div class="iconandname">
          <img src="https://adz.netlify.app/images/paoloicon.svg" class="paoloicon" width="300px" alt="icona ragazzo">
          <h3 class="contactname">Paolo</h3>
        </div>
        <div class="numeroandiconcell">
          <img src="https://adz.netlify.app/images/smartphone.svg" class="iconasmartphone" width="70px" alt="icona smartphone">
          <a class="cellnumber" href="tel:[phone]">347 592 4197</a>
        </div>
        <div class="tap">
          <img src="https://adz.netlify.app/images/tap.svg" class="tapicon" width="40px;" alt="icona raffigurante simbolo touch">
          <p class="chiamaconuntocco">Chiama con un tocco</p>
        </div>
      </div>

,

我不确定您不想更改职位的意思，因为这可能是您想要的最简单的解决方法。

.numeroandiconcell {
    position: relative;
    justify-content: center
}
.iconasmartphone {
    position:absolute;
    left: 5px;
}

这样，该图标将保留在父div内（位置：relative允许这样做），但它将一直位于左侧，而数字居中。

鉴于您的父div中有2个元素（图标和数字本身），就无法在不从流中删除图标的情况下真正地将数字居中（就像position：absolute一样）。