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

Posted 2023-02-15

【中文标题】将文本分配到圆图像的中心

【英文标题】：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 中，您会看到图像下方悬空的文本不存在但仍占据空间。

是的，我没有注意到它，因为我还是编码新手。非常感谢！

【参考方案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>