如何在HTML/CSS中居中动态文本并避免与按钮重叠？

核心问题是原代码用绝对定位将文本和按钮独立布局，没有相互约束，导致长文本重叠按钮；同时短文本的对齐需求也没满足。下面是调整后的代码方案：

<html>
<head>
    <script>
        const arr = [
            { title: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." },
            { title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.' },
            { title: "Name2" },
            { title: "Name3" },
            { title: "Name4" }
        ];
        function onClickHandler() {
            const textContainer = document.getElementById('text-container');
            const item = arr[Math.floor(Math.random() * arr.length)];
            textContainer.textContent = item.title;
        }
    </script>
    <title> Random Site</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        #text-container {
            max-width: 80%;
            text-align: left;
            margin-bottom: 20px; /* 文本和按钮保持固定间距 */
        }
        button {
            padding: 8px 16px;
        }
    </style>
</head>
<body>
    <div id="text-container"></div>
    <button onclick="onClickHandler()">Button</button>
</body>
</html>

关键调整说明： #

• 用Flexbox布局替代绝对定位：将body设置为flex容器，垂直排列内部元素，同时让整个内容在视口居中，自适应屏幕大小。
• 文本容器设置max-width：限制文本最大宽度，避免长文本撑满屏幕，同时自动换行。
• 文本左对齐+容器居中：text-align: left让文本内容左对齐，flex的align-items: center让文本容器本身在页面水平居中，满足短文本左对齐的需求。
• 固定间距：margin-bottom让文本和按钮保持固定距离，无论文本长短都不会重叠。
• 替换ul为专用容器：用div#text-container替代无序列表，语义更合适，直接用textContent更新文本避免HTML注入风险。

内容的提问来源于stack exchange，提问作者Solo