在插入其他元素前后垂直居中搜索框

Vertically center search box before and after inserting another elements

本文关键字：垂直居中 搜索 插入 其他 元素      更新时间：2023-09-26

$(function() {
  $('.forminput input[type="text"]').on('input propertychange', function() {
    var $this = $(this);
    var visible = Boolean($this.val());
    $this.siblings('.glyphicon').toggleClass('hidden', !visible);
  }).trigger('propertychange'); //nema potrebe za njim
  $('.glyphicon').click(function() {
    $(this).siblings('input[type="text"]').val('')
      .trigger('propertychange').focus();
    $('.results').empty();
  });
  $('.forminput').on('submit', function(event) {
    event.preventDefault();
    var typed = $('.nice').val();
    $.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
      action: 'query',
      srsearch: typed,
      format: 'json',
      list: 'search'
    }, function(data) {
      $('.results').empty();
      console.log(data);
      $.each(data.query.search, function(index, item) {
        $('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
      })
    })
  })
})
body {
  background: rgb(9, 43, 64);
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  height: 90vh;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.glyphicon {
  color: #B2DFDB;
}
.textbox {
  text-align: center;
}
.randomArticle {
  color: #B2DFDB;
  font-size: 1.4em;
}
.randomArticle:hover {
  text-decoration: none;
  color: pink;
  cursor: pointer;
}
.randomArticle:link {
  text-decoration: none;
  color: #B2DFDB;
}
form {
  margin-top: 30px;
  margin-bottom: 30px;
}
form .nice {
  width: 300px;
  border-radius: 10px;
  border: 5px solid orange;
  background: transparent;
  color: white;
  padding: 7px 15px;
}
form .nice:focus {
  outline: none;
}
.button {
  border-radius: 10px;
  border: 5px solid orange;
  padding: 7px 15px;
  margin-left: 20px;
  background: transparent;
  color: #B2DFDB;
}
.button:hover {
  background: #00897B;
}
.button:focus {
  outline: none;
}
.append {
  color: black;
}
.append:hover {
  text-decoration: none;
}
.appendsearch {
  background: rgb(230, 230, 231);
  margin: 20px 70px 20px 70px;
  padding: 10px 20px;
  color: black;
  border-left: 4px solid rgb(9, 43, 64);
  font-weight: 500;
}
.appendsearch h1 {
  font-size: 20px;
  font-weight: bold;
}
.appendsearch p {
  font-size: 15px;
}
.appendsearch:hover {
  border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
  <div class='wrapper'>
    <div class='textbox'>
      <a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
      <form class='forminput'>
        <input class='nice' type='text'>
        <span class='glyphicon glyphicon-remove hidden'></span>
        <input class='button' type='submit' value='Search'>
      </form>
    </div>
    <div class='results'></div>
  </div>
</div>
</body

在插入搜索结果前后，我无法使元素垂直居中。我尝试了很多选项，但我得到的只是在搜索结果的左侧插入搜索框的情况。这是示例>http://codepen.io/Todorovic/pen/PGrqOp

我所做的是使用jQuery添加一些代码行。要将div水平和垂直居中，请更改css：

 $('.textbox').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : function() {return -$(this).outerWidth()/2},
        'margin-top' : function() {return -$(this).outerHeight()/2}
    });

如果您不熟悉尺寸，请检查：

http://api.jquery.com/outerwidth/

http://api.jquery.com/outerheight/

提交表单后，在代码中再次更改div的css，将其放在页面顶部：

 $('.textbox').css({
    'position' : 'absolute',
    'left' : '50%',
    'top':'0%',
    'margin-top' : '30px',
    'margin-left' : function() {return -$(this).outerWidth()/2},
});

追加结果后，为div:添加页边空白

  $('.results').css({       
          'margin-top': $('.textbox').height()
      })     
  })

以下是CodePen示例：http://codepen.io/anon/pen/NRZwEJ

希望元素不是动态的，并且在搜索框周围有一个固定的元素结构。在完成元素结构和样式之后，您必须确定textbox元素的高度。目前是47像素。我们将在下面的css中使用这个值。

接下来，将以下样式添加到css中。

.textbox {
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -23px;
}

请注意，margin-top的值是47px(textbox元素的一半(的一半

编辑

在jquery代码中添加以下行。

$('.forminput').on('submit', function(event) {
    $('.textbox').addClass('pull-up');

之后，使用以下附加样式更新css。

.textbox {
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -23px;
}
.textbox.pull-up {
    position: relative;
    top: auto;
}
相关文章：