将div中的图像水平居中 [英] Center image inside div horizontally
本文介绍了将div中的图像水平居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用箭头向上/向下设置图像，以便水平居中div。
我已阅读过一些教程和问题，但以下方法无效：
.img {
display：block;
margin：auto;
}
它使用Bootstrap制作，因此将该部分集成到以下代码片段中供您查看。它还具有一些JS功能，它可以在动画和点击时改变图像。
<$ （）函数（）函数（）{$（this）code> / * Animation * / $（document）.ready（function（）{$（'。text'）。hide（）; $（'。expander' （）。（）。next（）。slideToggle（200）;}）; $（'。text'）。slideUp（200）;}）; / *更改图像* / $（function（）{$ '）.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;}。 close：focus，.close：hover {opacity：1！important;}。clickexpander {position：absolute;底部：10px;}。clickexpander img {max-width：50px;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script><！ - 最新编译并缩小CSS - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous><！ - 最新编译和缩小的JavaScript - >< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap。 min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =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>< / h3> < a href =＃/title =Prislistedata-target =＃> < div class =expander clickexpander> < img class =opensrc =http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.pngalt =Openstyle =display：block;> < img class =closesrc =http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.pngalt =关闭style =display：none;> < / DIV> < / A> < div style =display：none;> < div class =row> < div class =col-md-12 littluft lefttext luftopp> < p为H. Befaring av hytte / fritidshus og befaringsrapport 2 gangerårlig< / p> < / DIV> < / DIV> < / DIV> < / div>< / div>
这个问题可以解决吗？
解决方案中心使用
transform - 您可以集中定位元素的方式。将这些样式添加到 clickexpander ： left：50％;
transform：translateX（-50％）;
参见下面的演示：
.red {background-color：＃cc1042;}。whitetext {color：#ffffff;}。lefttext {text-align：left;}。centertext {text-align：center;}。righttext {text-align：right;}。 {padding：15px 15px 15px 15px;}。paddingned80 {padding-bottom：80px;}。close {opacity：1！important;}。close：focus，.close：hover {opacity： 1！important;}。clickexpander {position：absolute;底部：10px;剩下：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>< ！ - 最新的编译和缩小的CSS - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity = sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous><！ - 最新编译和缩小的JavaScript - >< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7 /js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =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>< / h3> < a href =＃/title =Prislistedata-target =＃> < div class =expander clickexpander> < img class =opensrc =http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilned.pngalt =Openstyle =display：block;> < img class =closesrc =http://www.snekkergrytvik.no/wp-content/uploads/2016/12/pilopp.pngalt =关闭style =display：none;> < / DIV> < / A> < div style =display：none;> < div class =row> < div class =col-md-12 littluft lefttext luftopp> < p为H. Befaring av hytte / fritidshus og befaringsrapport 2 gangerårlig< / p> < / DIV> < / DIV> < / DIV> < / div>< / div>
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 not work:
.img {
display: block;
margin: auto;
}
Its made with Bootstrap, so integrated the part in snippet below for you to see. It also has some functions with JS which makes the animation and change the image when it's clicked.
/* 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>
Any ideas how this problem can be solved?
解决方案
Center using transform - one of the ways you can center a positioned element. Add these styles to clickexpander:
left: 50%;
transform: translateX(-50%);
See demo below:
/* 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>
这篇关于将div中的图像水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
