Получение анимированного места для ввода текста на всех устройствах

Question

Я работаю с базовой функцией анимации JQuery, чтобы попытаться ее изучить. Кажется, прямо сейчас до сих пор, но проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы формулировка была выровнена по горизонтали/вертикали в контейнере, в котором у меня есть.

Я попытался установить место посадки в JQuery до 50 %, но это, очевидно, начало div в позиции 50%. Теперь, если бы я сделал это на 40%, например, это может работать на один размер экрана, но не на другой. Теперь, как правило, я просто настраивал свои медиа-запросы для других типов экранов, но я не уверен, как это будет работать с местом назначения приземления, определенным в JQuery.

Кто-нибудь знает, как я могу выполнить это с помощью JQuery и сменить css, чтобы получить это положение в одном месте независимо от размера экрана?

$(function() { 
 
    $("#text_div").animate(
 
     {left : "50%"}, 500, function() {} 
 
    ); 
 
});

#container { 
 
\t margin: 20px 10%; 
 
\t height: 500px; 
 
\t border: 1px solid black; 
 
\t position: relative; 
 
\t top: 70px; 
 
} 
 
#text_div { 
 
    max-width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    left: 0; 
 
\t top: 40%; 
 
\t clear: both; 
 
\t font-size: 3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
\t <div id="text_div">My writing</div> 
 
</div>

Answer 1

$(function() { 
 
    $("#text_div").animate({ 
 
    left: "0" 
 
    }, 500, function() {}); 
 
});

#container { 
 
    margin: 20px 10%; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    top: 70px; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
#text_div { 
 
    max-width: 100%; 
 
    height: 50px; 
 
    position: relative; 
 
    left: -40%; 
 
    top: 40%; 
 
    clear: both; 
 
    font-size: 3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="text_div">My writing</div> 
 
</div>

Я использовал CSS3 Flexbox, чтобы выровнять текст в центре.

Answer 2

Вы можете рассчитать ширину контейнеров div, выполнить математические операции и установить значение left. Это будет всегда зависит от размера экрана устройства

HTML

<div id="container"> 
    <div id="text_div">My writing Here</div> 
</div> 

CSS

#container { 
    height: 500px; 
    border: 1px solid black; 
    position: relative; 
    top: 70px; 
    margin:auto; 
    width:500px; 

} 
#text_div { 
    position: absolute; 
    width:auto; 
     top: 50%; 
     font-size: 3em; 
} 

JS

$(function() { 
var a = ($("#container").width())/2- ($("#text_div").width())/2 
    $("#text_div").animate(
     {left : a}, 500, function() {} 
    ); 
}); 

DEMO JSFIDDLE

Текст Уиллу сегда быть horizantally по центру, и вы можете сделать то же самое, чтобы сделать его вертикально centerd

Надеется, что это будет полезно