センターdiv他の場所

Question

私は応答メニューを作成したいと思っています。私のメニュー項目には、クラス.currentが画面の中心にある必要があります。私はjQueryを作ろうとしましたが、.currentアイテムの中心に位置を設定する方法はわかりません。

私JSFiddle

がありますそして、私のjQueryのは、私は問題を解決するためにCSSを使用する方法について

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


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

Answer 1

どのように作ってみました、何がありますか？ CSSで

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

Answer 2

：

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

左右の自動マージンが水平方向のセンタリングを保証します。あなたは関係なく、それがどこにある.current要素までスクロールしないようにしたい場合は

Answer 3

、あなたはいくつかの計算を行う必要があるでしょう：

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