Question

How can I center the div headline and keep it’s length as wide as the text inside (My title) without setting a width for .headline.

<div class="sidebar">

    <div class="headline"><p>My title</p></div>

</div>

Right now I am using this css, but “my title” is generated by php and differs in length:

.headline {
    width: 5em;
    background: #900;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    line-height: 2em;
    border: solid 1px #555;
    border-top: none;
    padding: 0;
    margin: 0 auto
}

Thank you

Answer 1

.sidebar {
  text-align: center;
}
.headline {
  display: inline-block;
}