Whenever I hover over a specific div element, two buttons appear side by side which is not the desired behavior. Below is the code snippet that I have used:
.main_div{
width:160px;
height:160px;
border:thin black solid;
padding:5px;
position:relative;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
/* IE10 -Doesn't work yet! */
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
-ms-box-orient:horizontal;
}
.main_div .hover_div{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width:100%;
height:100%;
background: rgba(0,0,0,0.5);
display: none;
}
.main_div .hover_div .upload_btn{
background: white;
padding: 3px 20px;
color: #58666e;
margin: 8px 0;
}
.main_div:hover .hover_div{
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
/* IE10 -Doesn't work yet! */
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
-ms-box-orient:horizontal;
}<div class="main_div">
<div class="hover_div">
<div class="upload_btn cursor_pointer">
<span>xyz</span>
</div>
<div class="upload_btn">
<span>abc</span>
</div>
</div>
</div>I am looking to vertically center the upload_btn with a gap of 10-12px between them.
Note: The solution should be compatible with IE10 while maintaining the same design.