Question

我想创建一个响应式菜单，我的菜单项{class} {{}}需要位于屏幕中心。我试图制作一个jQuery，但我不知道如何设置.current项的中心位置。

还有我的jQuery，我试图制作的

.current

Answer 1

如何使用css解决问题？

.current{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Answer 2

如果您想要滚动到.current元素，无论它在哪里，您都必须进行一些计算：

$(document).ready(function(){
    $(updateBoxDimension);
    $(window).on('resize', updateBoxDimension);
});


function updateBoxDimension() {
    var current = $(".menu .item.current");
    var pozition = $(current).position().left;
    var currentWidth = $('.current').width();
    var menuWidth = $('.menu').width();
    var requiredLeftDistance = ((menuWidth-currentWidth)/2);
    var distanceToMove = (pozition-requiredLeftDistance);
    $('.menu').animate({
            scrollLeft: distanceToMove
        }, 200);
}

.menu{
  width:100%;
  overflow-x:auto;
  white-space:nowrap;
}

.menu .items{}

.menu .items .item{
  display:inline-block;
  padding:7px 15px;
}

.menu .items .item.current{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="items">
    <div class="item">Menu item 1</div>
    <div class="item">Menu item 2</div>
    <div class="item">Menu item 3</div>
    <div class="item current">Menu item 4</div>
    <div class="item">Menu item 5</div>
    <div class="item" >Menu item 6</div>
    <div class="item ">Menu item 7</div>
    <div class="item">Menu item 8</div>
    <div class="item">Menu item 9</div>
    <div class="item">Menu item 10</div>
    <div class="item">Menu item 11</div>
    <div class="item">Menu item 12</div>
    <div class="item">Menu item 13</div>
    <div class="item">Menu item 14</div>
  </div>
</div>

所以，你采取当前的元素位置。然后计算它必须在哪里。最后你为了差异而移动它。如果差异为负，则不会移动，因为它已经可见。 https://jsfiddle.net/9c7a94L4/5/

Answer 3

在css中：

.current {
  position: relative;
  margin: 0 auto;
}

左右自动边距确保水平居中。

中心div由其他位置

3 个答案: