Question

我正在尝试在页面中间放置一个句子。这是我提出的代码：

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

这使得txt居中，但是将每个单词放在另一个上面而不是在一行上。我尝试增加高度，宽度然后保证金，但我可以让它工作。

我该怎么做？

Answer 1

这在你的代码中：

left: 50%;
right: 50%

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

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

P.S。：由于位置是绝对的，您需要定义宽度，为100％。（或使用position:relative;代替）

Answer 2

left: 50%; right: 50% - 如果左边是容器的一半而右边是容器的一半，那么盒子的宽度将为0，内容将为单词在更早的机会包装。

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

请考虑将top替换为margin-top。

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，这会强制文本堆叠。

将一句话放在一行CSS上

3 个答案: