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

https://jsfiddle.net/L8cwc1of/4/

我给了按钮图片一个id，然后将其设置为float: center;，以及Julian的评论，在包含的div上添加text-align: center;。

Answer 2

请找到下面的代码段，如果这是你想要的，请告诉我。

我已将上传按钮HTML包装在div（类图像容器）中并使其显示在div的中心，使用

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

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

.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;
  text-align: center;
}

.image-container{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<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">
    <div class='image-container'>
      <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>
</div>
</body>
</html>

希望这有帮助

Answer 3

只需将以下代码添加到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;
}

工作小提琴：https://jsfiddle.net/ash06229/L8cwc1of/16/

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

覆盖图上的图片上传按钮...与我的CSS有问题

3 个答案: