将文本分配到圆图像的中心答案

【问题标题】：Assign the text to center of the circle image将文本分配到圆图像的中心
【发布时间】：2021-10-07 23:10:21
【问题描述】：

我想在圆形图像的中心分配文本“上传个人资料图片”。但是当我运行代码时它没有显示文本。下面是html代码和css代码。

      <div class="small-12 medium-2 large-2 ">
         <div class="circle upload-button d-flex mx-auto mb-4" style="position:unset;">
           
           <img class="profile-pic" src="">
           <div class="centered">Upload Profile Picture</div>
           
         </div>
            <input class="file-upload" type="file" accept="image/*"/ >
         
      </div>

    .profile-pic {
        max-width: 222px;
        max-height: 222px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .file-upload {
        display: none;
    }
    .circle {
        border-radius: 50%;
        overflow: hidden;
        width: 228px;
        height: 228px;
        border: 8px solid #dbdbdb;
        position: absolute;
        top: 72px;
      transition: all .3s;
    }

    .circle:hover {
      background-color: #909090;
      cursor: pointer;
    }
    img {
        max-width: 100%;
        height: auto;
        min-width: 212px;
        min-height: 212px
    }

【问题讨论】：

你有没有尝试在文本div中添加任何css
我正在为文本使用引导类。除了 bootstrap 类之外，没有添加任何 css。
你在这里遗漏了很多东西。您需要使用绝对定位文本。如果删除溢出：隐藏；从 .circle 中，您会看到图像下方悬空的文本不存在但仍占据空间。
是的，我没有注意到它，因为我还是编码新手。非常感谢！

标签： html css asp.net

【解决方案1】：

试试这个：

.profile-pic {
  max-width: 222px;
  max-height: 222px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.file-upload {
  display: none;
}

.circle {
  border-radius: 50%;
  overflow: hidden;
  width: 228px;
  height: 228px;
  border: 8px solid #dbdbdb;
  position: absolute;
  top: 72px;
  transition: all .3s;
}

.circle:hover {
  background-color: #909090;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  min-width: 212px;
  min-height: 212px
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

  <div class="small-12 medium-2 large-2 ">
    <div class="circle upload-button d-flex mx-auto mb-4">
      <img class="profile-pic" src="">
      <div class="centered">Upload Profile Picture</div>
    </div>
    <input class="file-upload" type="file" accept="image/*"/ >
  </div>

【讨论】：

非常感谢！代码现在可以工作了。

【解决方案2】：

你没有提到@987654321类的属性@我已经在我的代码中添加了居中类的属性

.profile-pic {
  max-width: 222px;
  max-height: 222px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.file-upload {
  display: none;
}

.circle {
  border-radius: 50%;
 text-align:center;
  width: 228px;
  height: 228px;
  border: 8px solid #dbdbdb;
  position: absolute;
  top: 72px;
  transition: all .3s;
  
}

.circle:hover {
  background-color: #909090;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  min-width: 212px;
  min-height: 212px
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  <div class="small-12 medium-2 large-2 ">
    <div class="circle upload-button d-flex mx-auto mb-4">
      <img class="profile-pic" src="">
      <div class="centered">Upload Profile Picture</div>
    </div>
    <input class="file-upload" type="file" accept="image/*"/ >
  </div>

【讨论】：