I am trying to set the image with arrow up/down to horizontally center of the div.
I have read some tutorials and questions here, but the following method does
Add text-align:center
to .clickexpander
and display:inline-block
to img
and make sure to add position:relative
the parent div when you used position:absolute
/* Animation */
$(document).ready(function () {
$('.text').hide();
$('.expander').click(function () {
$(this).parent().next().slideToggle(200);
});
$('.text').slideUp(200);
});
/* Change image */
$(function() {
$('.expander').click(function(){
$(this).children('img').each(function(){
$(this).toggle(0);
});
});
});
.red { background-color: #cc1042; }
.whitetext { color: #ffffff; }
.lefttext { text-align: left; }
.centertext { text-align: center; }
.righttext { text-align: right; }
.littpadding {
padding: 15px 15px 15px 15px;
}
.paddingned80 {
padding-bottom: 80px;
position:relative;
}
.close {
opacity: 1!important;
display:inline-block;
float:none !important;
}
.close:focus, .close:hover {
opacity: 1!important;
}
.clickexpander {
position:absolute;
bottom: 10px;
text-align: center;
width: 95%;
}
.clickexpander img {
max-width: 50px;
}