tyebillion tyebillion - 3 months ago 10
CSS Question

Text wrapping / not using full width on a horizontally centred position fixed element

I have some text which is in an outer div (container-fluid is from Bootstrap):

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


I am styling using the CSS:

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

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


The text is centred horizontally and does not push down the rest of the page due to the "fixed" setting. The only problem occurs when the text gets too long, it does not take up the full width in the page (more like 50% of the width) and wraps, for example:

** Bar record updated
**


Instead of:

** Bar record updated **


How can I allow the text to take up more space horizontally whilst still having it "fixed" and horizontally centred? I tried specifying the width but it interferes with the centring:

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

Answer

One of variants:

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

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