CSS: position 和 align 冲突

Question

我想在页面中央显示一个 H1 header 并将其位置设置为 "fixed"（因为我不希望它在用户滚动时离开屏幕）

我尝试了以下选项，但不幸的是无法实现。

选项 1：

<div align="center" style="position:fixed;"><h1>Welcome</h1></div>

选项 2：

<h1 text-align="center" style="position:fixed;">Welcome</h1>

选项 3：

<h1 text-align="center" position="fixed">Welcome</h1>

到目前为止，以上所有选项都是在固定位置显示文本，但不在屏幕中央。但是当我删除 position: fixed; 时，文本出现在屏幕中央。

有什么建议吗？

Answer 1

你可以试试这个：

 <div  align="center" style="position:fixed;width:100%"><h1>Welcome</h1></div>

给你的divwidth:100%。这是一个Demo

Answer 2

您可以定义您的 div left:0; 和 right:0;

像这样

<div  align="center" style="position:fixed;left:0;right:0;"><h1>Welcome</h1></div>

Answer 3

Option 1: <div align="center" style="position:fixed;"><h1>Welcome</h1></div>

HTML align 是 deprecated.

解决方案：

<div style="position:fixed;width:100%;text-align:center;"><h1>Welcome</h1></div>

<div style="position:fixed;right:0;left:0;text-align:center;"><h1>Welcome</h1></div>

Option 2: <h1 text-align="center" style="position:fixed;">Welcome</h1>

没有名为 text-align="center" 的 HTML 属性。

<h1 style="position:fixed;width:100%;text-align:center;">Welcome</h1>

<h1 style="position:fixed;left:0;right:0;text-align:center;">Welcome</h1>

Option 3: <h1 text-align="center" position="fixed">Welcome</h1>

HTML 属性没有 text-align="center" 和 position="fixed".

选项 3 的解决方案类似于选项 2 的答案。

CSS: Conflict between position and align