CODEWITHSUNDEEP
css
BernardoLima
BernardoLima

Reputation: 1141

Center div to bottom, fitting width to inner text

Here's what I've tried,the problem is that it only center my div when I set a fixed width in px.
How can I make the width to fit to the inner text?

HTML:

<div id="enclose">
    <div id="problem">
    MY TEXT HERE
    </div>
</div>

CSS:

#problem {
    margin-right:auto;
    margin-left:auto;
    width:200px;
}
#enclose {
    position:fixed;
    bottom:0px;
    width:100%;
}

JSFiddle:
http://jsfiddle.net/7bqsdt6o/2/

Upvotes: 0

Views: 148

Answers (2)

madcorp
madcorp

Reputation: 311

You can use text-align: center on parent element (#enclose) or the CSS3 feature width: intrinsic;.

Working code (at least on Chrome 38) - CodePen

Upvotes: 1

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can use text-align: center on your parent div i.e. <div id="enclose">, this would center your <div id="problem">.

#enclose {
    position:fixed;
    bottom:0px;
    width:100%;
    text-align: center;
}
<div id="enclose">
    <div id="problem">
    MY TEXT HERE
    </div>
</div>

Upvotes: 1

Related Questions