Question

我正在尝试将图像放在锚标记中居中，以充当搜索按钮。 Here是小提琴的链接。

还有其他类似问题，但它们无法回答我的问题。

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

body {
  height: 3000px;
}

.search {
  float: right;
}

#form1 input {
  width: 200px;
  padding: 5px 40px 5px 5px;
  float: left;
}

#form1 a {
  float: left;
  margin: 2px 0 0 -32px;
  text-decoration: none;
  width: 30px;
  height: 25px;
  z-index: 99;
}

.fixme {
  float: right;
  background: green;
  color: white;
  text-align: center;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="header">
    <div class="search">
      <form id="form1" method="post" action="">
        <input type="text" name="text" id="text" />
        <a class="a" href="#"><img src="img/search-icon.png" height="42" width="42" /></a>
      </form>

    </div>

    <div class="button-login">

    </div>

    <div class="fixme">sticky</div>
  </div>


</body>

</html>

这是正在发生的事情： Image

我已经尝试了所有方法，但无法弄清楚如何使图像居中...

使用CSS可以轻松解决此问题吗？

谢谢，任何建议都将不胜感激。

Answer 1

尝试居中标签，用该标签包裹要居中的元素：

   <form id="form1" method="post" action="">
        <center>
        <input type="text" name="text" id="text" />
        <a class="a" href="#"><img src="img/search-icon.png" height="42" width="42" /></a>
        </center>
   </form>

您也可以使用div来拖动元素并在那里进行样式设置：

    <div style="text-align:center;" >
    <input type="text" name="text" id="text" />
    <a class="a" href="#"><img src="img/search-icon.png" height="42" width="42" /></a>
    </div>

Answer 2

标签不是css块，而是内联元素。您必须将a标签设为具有CSS显示功能的块：inline-block。然后，您可以使用text-align：center。

将图片居中于锚标记中

2 个答案: