How do you easily horizontally center a using CSS? [duplicate]

by

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

More Related Contents:

  1. Animate text for landing page
  2. CSS – Equal Height Columns?
  3. Floating elements within a div, floats outside of div. Why?
  4. How to style HTML5 range input to have different color before and after slider?
  5. Margin-Top not working for span element?
  6. 2 column div layout: right column with fixed width, left fluid
  7. How to add a scrollbar to an HTML5 table?
  8. Center a div in CSS [closed]
  9. Font Awesome not working, icons showing as squares
  10. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  11. How do I style the HTML5 form validation error messages with CSS?
  12. Right to Left support for Twitter Bootstrap 3
  13. override css for html5 form validation/required popup
  14. CSS values using HTML5 data attribute [duplicate]
  15. How would you make two s overlap?
  16. Make outer div be automatically the same height as its floating content
  17. How to auto adjust the height according to content in it?
  18. layer on top of PDF
  19. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  20. CSS text ellipsis when using variable width divs
  21. why is my content showing outside the div?
  22. How to get these two divs side-by-side?
  23. Why use an HTML5 semantic tag instead of div? [duplicate]
  24. How to display and hide a div with CSS?
  25. How to make responsive table [closed]
  26. Why adds extra top margin?
  27. How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
  28. Is there a way to style HTML5’s range control?
  29. Background image not displaying in chrome browser
  30. Difference between and with text-align:center;?

Leave a Comment