在按键事件上对齐页面中间的文本框

Align the TextBox in middle of page on keypress event

本文关键字：中间 文本 对齐 事件      更新时间：2023-09-26

我正在尝试在文本框的按键事件中将文本框对齐在页面中心，但我只能使用下面给出的代码放大文本框的大小......

<title></title>
<script type="text/javascript">
    function resize(selectObj) {
        selectObj.style.height = '400px';
        selectObj.style.width = '800px';
        selectObj.style.padding = '10px 10px 10px 10px';
        selectObj.style.position = 'absolute';
    }
</script>


<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txt" runat="server" TextMode="MultiLine"  onkeypress="resize(this);">
</asp:TextBox>
    </div>
    </form>
</body>
</html>

你可以这样做

$( "#txt" ).keypress(function() {
$("#maindiv").css({'display' : 'block', 'text-align' : 'center'});
});

演示小提琴

屏幕中心的更新

$( "#txt" ).keypress(function() {
$(this).css('margin-left', ($(window).width() / 2));
});

演示小提琴屏幕中心

您可以使用绝对定位将其居中。您应该考虑文本框的宽度和高度： 

$( "#txt" ).keypress(function() {
    $(this).css({
        'position': 'absolute', 
        'left': ($(window).width() / 2 - $(this).width() / 2) + 'px',
        'top': ($(window).height() / 2 - $(this).height() / 2) + 'px',
    });

这肯定会帮助你 

$( "#txt" ).keypress(function() {
    $(this).css({
        'position': 'absolute', 
        'left': ($(window).width() / 2 - $(this).width() / 2) + 'px',
        'top': ($(window).height() / 2 - $(this).height() / 2) + 'px',
    });

$( "#txt" ).keypress(function() {
$(this).css({
    'position': 'absolute', 
    'left': ($(window).width() / 2 - $(this).width() / 2) + 'px',
    'top': ($(window).height() / 2 - $(this).height() / 2) + 'px',
});
相关文章：