I’m trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I’ll try to draw an example:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
In the case of a non-fixed width div (i.e. you don’t know how much space the div will occupy).
#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>Keep in mind that the width of #yourdiv is dynamic -> it will grow and shrink to accommodate the text inside it.
You can check browser compatibility on Caniuse