中心div由其他位置

我想做出響應菜單，我的菜單項與類.current需要在屏幕中心。我試圖做一個jQuery，但我不知道如何設置位置爲.current項目的中心。中心div由其他位置

而且有我的jQuery，我試圖讓

$(document).ready(function(){ 
    $(updateBoxDimension); 
    $(window).on('resize', updateBoxDimension); 
}); 


function updateBoxDimension() { 
    var current = $(".menu .item.current"); 
    var pozition = current.position(); 
    var windows = $(window).width(); 
}

來源

2017-03-06 Daniels Jirgensons

您想專注於'.current'元素嗎？ – Armin

實際上是的，它被滾動到中心 –

如何使用CSS來解決這個問題？

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

來源

2017-03-06 14:24:23 blackmiaool

也許一些z-index的東西是需要的。 – blackmiaool

我總是使用負邊距來將我的元素拉回中心，但總是需要知道寬度，但使用您的方法，您不需要有寬度，它仍然可以通過'transform：translate '。我從來不知道這個......非常感謝！ – Slime

@Waxi如果你對我的回答滿意，你可以接受它。 – blackmiaool

在CSS：

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

左，右自動利潤率確保水平居中。

來源

2017-03-06 14:36:25

如果你想滾動到.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/

來源

2017-03-06 14:55:34 Armin

中心div由其他位置

回答

相關問題