将句子置于一行CSS上

Question

我试图将句子放在页面中间。这是我想到的代码：

#wiz {
    text-align: center;
    text-transform: uppercase; 
    color: white;
    position: absolute;
    font-family: 'Roboto Mono', sans-serif;
    top: 250px;
    left: 50%;
    right: 50%
}

这将中心居中，但将每个单词放在另一行上，而不是在一行上。我尝试添加高度，宽度，然后是边距，但我可以使它工作。

我该怎么做？

Answer 1

在您的代码中：

left: 50%;
right: 50%

使该元素的宽度为零：左边框距左侧50％，右边框距右侧50％。剩余空间：0

只需删除这两个，text-align: center;就足够了...

p.s。：由于位置是绝对的，您需要定义宽度，占100％。（或使用position:relative;）

Answer 2

left: 50%; right: 50% - 如果左边是横跨容器的一半，并且右侧在容器中横跨一半，则盒子的宽度将为 0，并且内容将word word word在较早的机会中包裹。

删除position，top，left和right。如果该元素默认不是块，请添加display: block。

考虑用margin-top替换CC_11。

Answer 3

更改以下：

#wiz {
    text-align: center;
    text-transform: uppercase; 
    color: white;
    position: absolute;
    font-family: 'Roboto Mono', sans-serif;
    top: 250px;
    width: 100%;

}width属性将使您的容器与父容器相同。text-align属性将中心文本。left和right属性试图使#WIZ容器的每一侧为50％，有效宽度为0，这迫使文本堆叠。