CODEWITHSUNDEEP
csstwitter-bootstrap
gornvix
gornvix

Reputation: 3384

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%);
}

Update

The answer given below works if additionally I move the divs around and add a "top" setting:

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

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

Upvotes: 0

Views: 111

Answers (2)

Agbogidi Michael
Agbogidi Michael

Reputation: 137

I think if you just simply added a margin: 0 auto; to the #foo css style. That should also solve that. As that sets every item in that #foo container to be centered. 

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

Upvotes: 0

Nikita
Nikita

Reputation: 1082

One of variants:

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

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

Upvotes: 2

Related Questions