So I know I butchered the title a bit but if someone looks here http://grainandgram.com/theexchange/fivequestions-benrunkle/ at where it says ‘Five Question With a Craftsman’ you’ll understand better. Basically he has a div with a background and then a div wrapped inside. The Div inside is set to be in the middle of the line and has a white background. I’d like to do something similar but center it. My problem when I center it htough is my data is dynamic and I cannot set a width. With no width the div extends out to both sides.
Is there a way to center the text and not have a width and not have the div automatically expand to a 100% of the width?
Below is the HTML and CSS.
<div class="grid_24" id="section">
<div class="section_fivequestions">Five Questions With A Craftsman</div>
</div>
#section {
height: 2px;
background-color: #BCA474;
margin-bottom: 20px;
margin-top: 40px;
width:940px;
text-align:center;
}
.section_fivequestions {
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
line-height: 3px;
background-color: white;
color: #BCA474;
width: 225px;
margin: auto;
}
Note if the width: portion is removed the div’s width becomes 940px. If I keep the width but enter text longer than 225px the alignment is off and no longer centered.
Any ideas on how to allow the text inside to be of any length and not have the div span the entire width?
a display:inline on the inner div?