Question

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

我无法在搜索结果之前和之后将元素垂直居中。我尝试了很多选项，但我得到的是在搜索结果的左侧插入搜索框的情况。这是样本＆gt; http://codepen.io/Todorovic/pen/PGrqOp

Answer 1

希望元素不是动态的，并且搜索框周围有一个固定的元素结构。在完成元素结构和样式之后，您必须确定textbox元素的高度。目前是47px。我们将在以下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; }

Answer 2

我做的工作就是用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添加margin-top：

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

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

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

2 个答案: