2016-12-07 154 views
1

我想设置图像的箭头上/下水平中心的股利。居中图像div水平

enter image description here

我看了一些教程和问题在这里,但下面的方法不起作用:

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

及其与引导做,所以集成在下面给你看段的一部分。它还具有一些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 { \t 
 
    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> \t \t \t \t 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

任何想法,这个问题如何解决呢?

回答

1

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

+1

解决问题。谢谢, – Olen

1

.clickexpanderdisplay:inline-block添加text-align:centerimg并确保添加position:relative父DIV当你使用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; 
 
}
<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> \t \t \t \t 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

0

试试这个代码

.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> \t \t \t \t 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

0
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 { \t 
 
    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> \t \t \t \t 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>