我正在尝试使用向上/向下箭头将图像设置为 div 的水平中心。
我在这里阅读了一些教程和问题，但以下方法不起作用：
.img {
display: block;
margin: auto;
}
它是用 Bootstrap 制作的，因此将部分集成在下面的代码片段中供您查看。它还具有一些 JS 功能，可以在点击时制作动画并更改图像。
/* 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;
}
.paddingned80 {
padding-bottom: 80px;
}
.close {
opacity: 1!important;
}
.close:focus, .close:hover {
opacity: 1!important;
}
.clickexpander {
position:absolute;
bottom: 10px;
}
.clickexpander img {
max-width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 luft whitetext centertext whitelink">
<div class="littpadding paddingned80 red">
<h2>Sesong</h2>
<h3>990,- pr år</h3>
<a href="#/" title="Prisliste" data-target="#">
<div class="expander clickexpander">
<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
</div>
</a>
<div style="display:none;">
<div class="row">
<div class="col-md-12 littluft lefttext luftopp">
<p>
Befaring av hytte/fritidshus og befaringsrapport 2 ganger årlig
</p>
</div>
</div>
</div>
</div>
</div>有什么想法可以解决这个问题吗？
中心使用transform- 将定位元素居中的方法之一。将这些样式添加到clickexpander:
left: 50%;
transform: translateX(-50%);
请参阅下面的演示：
/* 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;
}
.close {
opacity: 1!important;
}
.close:focus,
.close:hover {
opacity: 1!important;
}
.clickexpander {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.clickexpander img {
max-width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 luft whitetext centertext whitelink">
<div class="littpadding paddingned80 red">
<h2>Sesong</h2>
<h3>990,- pr år</h3>
<a href="#/" title="Prisliste" data-target="#">
<div class="expander clickexpander">
<img class="open" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.png" alt="Open" style="display: block;">
<img class="close" src="http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.png" alt="Close" style="display: none;">
</div>
</a>
<div style="display:none;">
<div class="row">
<div class="col-md-12 littluft lefttext luftopp">
<p>
Befaring av hytte/fritidshus og befaringsrapport 2 ganger årlig
</p>
</div>
</div>
</div>
</div>
</div>