调整父元素大小时，文本会移动

Text moves when parent element is resized

本文关键字：文本 移动 小时 元素 调整      更新时间：2023-09-26

>我在div中有一个h1标签，它使用文本对齐居中。div 使用边距居中：自动。我有 JQuery 正在更改此div 的宽度，但是在重新调整大小时，文本会向右移动一点。这也发生在我下面的（也是居中的）菜单栏上。这是来自 JSFiddle 的代码：

.HTML 

<div id="content">
    <div id="header">
        <h1>Title</h1>
    </div>
    <div>
        <ul class="menu">
            <li class="menu"><a class="active" href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
            <li class="menu"><a                href="#">Text</a></li>
        </ul>
    </div>
</div>

杰奎里

$(document).ready(function() {
    var div = $("div");
    div.fadeTo(0, 0);
    div.fadeTo(1000, 1);
    div.animate({width: '+=2%'}, 250);
    div.animate({width: '-=2%'}, 500);
});

为简洁起见，css 是从帖子提交的，但在 JSFiddle 上

是什么原因造成的？如何避免呢？CSS 中没有任何内容可以独立影响任何内容的宽度或位置。

JSFiddle： https://jsfiddle.net/5vtvzsgc/

这是因为

您正在更改页面上所有div 的宽度。要解决此问题，只需更改外部div content的宽度，因此更改此行：

var div = $("div");

对此：

var div = $("#content");
相关文章：