我在集中覆盖图的内容时遇到了一些小问题 - 出于某种原因,我无法使其正常工作。覆盖图上的上传按钮...有我的css问题
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概述对齐尽可能居中......
如果您的意思是以中心为列,那么只需在.avatar-overlay__text类中添加text-align:center即可https://jsfiddle.net/L8cwc1of/1/ –
@Julian Espinosa - 看起来像您使用旧版本的jsfiddle - 我的道歉。我已经更新了它 - 带着你的建议,不幸的是它没有成功。然而,你所说的话似乎是在以前的工作。 –