html - 叠加层上的图像上传按钮...我的 CSS 有问题

Question

我在将叠加层的内容居中时遇到了一个小问题 - 由于某种原因我无法让它工作。

html:

<div class="avatar-container">
  <img src="{% static 'img/oauth/avatar_placeholder.svg' %}" alt="User Avatar" class="img-responsive img-circle avatar-image" style="width:200px;height:200px;">
  <div class="avatar-overlay">
    <div class="avatar-overlay__text">
      <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
      <input type="file" id='upload_image' name="{{ userprofile_form.user_avatar.name }}" {% if userprofile_form.user_avatar.value %}value="{{ userprofile_form.user_avatar.value }}"{% endif %} style="display: none;" />
      <div>Upload Image</div>
    </div>
  </div>
</div>

CSS:

.avatar-container {
    position: relative;
    width: 100%;
}

.avatar-image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
    margin: 0 auto;
}

.avatar-overlay {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.avatar-container:hover .avatar-image {
  opacity: 0.3;
}

.avatar-container:hover .avatar-overlay  {
  opacity: 1;
}

.avatar-overlay__text {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  margin: 0 auto;
}

js:

$("input[type='image']").click(function() {
  $("input[id='upload_image']").click();
});

这是我的 jsfiddle:

https://jsfiddle.net/michealjroberts/L8cwc1of/

谁能告诉我如何让图像(上传按钮)和上面 jsfiddle 中概述的文本尽可能居中对齐...

Answer 1

只需在 CSS 中添加以下代码:

.avatar-overlay__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

工作 fiddle :https://jsfiddle.net/ash06229/L8cwc1of/16/

我只是在 fiddle 的 CSS 部分的末尾添加上面的 CSS 代码。