覆蓋圖上的上傳按鈕...有我的css問題

我在集中覆蓋圖的內容時遇到了一些小問題 - 出於某種原因，我無法使其正常工作。覆蓋圖上的上傳按鈕...有我的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概述對齊儘可能居中......

來源

2017-06-12 Michael Roberts

如果您的意思是以中心爲列，那麼只需在.avatar-overlay__text類中添加text-align：center即可https://jsfiddle.net/L8cwc1of/1/ –

@Julian Espinosa - 看起來像您使用舊版本的jsfiddle - 我的道歉。我已經更新了它 - 帶着你的建議，不幸的是它沒有成功。然而，你所說的話似乎是在以前的工作。 –

只需將以下代碼添加到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代碼。

來源

2017-06-13 10:01:56 Shubham

嗯，flexbox的東西....這工作在所有瀏覽器類型？ IE8 –

Nope dude，它將適用於以下內容： OLD - iOS 6-，Safari 3.1-6，BB7，TWEENER - IE 10，新 - Safari 6.1+。 iOS 7.1+，BB10，NEW，規格 - Firefox，Chrome，Opera。 – Shubham

在我接受答案之前，會着眼於實現這個東西並做一些測試。 –

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

我把按鈕圖像的id，然後將其設置爲float: center;，以及Julian的關於在包含div上添加text-align: center;的評論。

來源

2017-06-12 21:07:12 NAMS

float：center？真的嗎？ – vals

Yeh試過 - 它不起作用。嘗試了我更新的jsfiddle - 不起作用。 –

嘗試flex：https://jsfiddle.net/L8cwc1of/14/ –

請找到下面的代碼片段，讓我知道這是你想要的。

我在一個div包裹上傳按鈕HTML（類圖像容器），並使它顯示在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; 
 
\t 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>

希望這幫助

來源

2017-06-13 09:48:00 Haroon

覆蓋圖上的上傳按鈕...有我的css問題

回答

相關問題