Question

我有一些文本位于外部div中（容器流体来自Bootstrap）：

<div class="container-fluid ctnt">
   <div id="foo">** text goes here **</div>
   ...
</div>

我使用CSS造型：

#foo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.ctnt {
    min-height: 100%;
    height: auto;
    padding-top: 46px;
    margin-bottom: -52px;
    padding-bottom: 52px;
}

文本水平居中，由于＆＃34;固定＆＃34;文本没有按下页面的其余部分。设置。唯一的问题是当文本太长时，它不占用页面中的整个宽度（更像是宽度的50％）和包装，例如：

** Bar record updated
**

而不是：

** Bar record updated **

如何让文本水平占据更多空间，同时仍然可以使用＃34;固定＆＃34;并水平居中？我尝试指定宽度，但它干扰了居中：

#foo {
    position: fixed;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
}

更新

下面给出的答案是有效的，如果另外我移动div并添加一个＆＃34; top＆＃34;设定：

<div id="foo">** text goes here **</div>
<div class="container-fluid ctnt">
    ...

#foo {
    top: 46px;
    text-align: center;
    position: fixed;
    width: 100%;
}

Answer 1

其中一个变种：

<div class='wrapper'>
   Some text
</div>

.wrapper {
   text-align:center;
   position:fixed;
   width: 100%;
}

Answer 2

我想如果你只是添加一个保证金：0 auto;到#foo css风格。那也应该解决这个问题。因为它将#foo容器中的每个项目设置为居中。

#foo { position: fixed; margin: 0 auto; }

文本环绕/不使用水平居中位置固定元素的全宽度

2 个答案: