在div內部水平居中

Question

我正在嘗試使用向上/向下箭頭將圖像設置為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> 

有什么想法可以解決這個問題嗎？

Answer 1

將text-align:center添加到.clickexpander並將display:inline-block到img ，並確保在使用position:absolute時添加position:relative對於父div

 /* 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; } 

 <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: inline-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> 

Answer 2

使用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> 

Answer 3

試試這個代碼

.expander, .littpadding a{
    width:100%;
    display:block;
}

.expander img{
display:block;
margin:0 auto;
}

 /* 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; } .close:focus, .close:hover { opacity: 1!important; } .clickexpander { position:absolute; bottom: 10px; text-align: center; width: 95%; } .clickexpander img { max-width: 50px; } .expander, .littpadding a{ width:100%; display:block; } .expander img{ display:block; margin:0 auto; } 

 <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: inline-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> 

Answer 4

just add .expander {left:50%;} to your css

 /* 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; } .expander { left:50%; } .lefttext p { text-align:center; } .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>