Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)
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 the 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

1 Answer

0 votes
by (40.7k points)

Try using the code given below, in case of a non-fixed width div: 

#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>

Note: The width of #yourdiv is dynamic and it will grow and shrink to accommodate the text inside it.

Related questions

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...