Question

我试图用箭头向上/向下设置图像的水平中心。

我在这里阅读了一些教程和问题，但以下方法不起作用：

.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:relative position:absolute父div p>

/* 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%);

见下面的演示：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

水平div内的中心图像

4 个答案: