Center text in div?

by

To center horizontally, use text-align:center.

To center vertically, one can only use vertical-align:middle if there is another element in the same row that it is being aligned to.
See it working here.

We use an empty span with a height of 100%, and then put the content in the next element with a vertical-align:middle.

There are other techniques such as using table-cell or putting the content in an absolutely positioned element with top, bottom, left, and right all set to zero, but they all suffer from cross browser compatibility issues.

More Related Contents:

  1. When to use margin vs padding in CSS [closed]
  2. Remove extra button spacing/padding in Firefox
  3. Padding-bottom/top in flexbox layout
  4. -webkit-margin adds unwanted margin on texts
  5. Remove all padding and margin table HTML and CSS
  6. How to add different CSS style to every nth element, depending on n using LESS
  7. What is the difference between `margin` and `padding` in CSS?
  8. Absolute positioning ignoring padding of parent
  9. Why isn’t my justify-content property working?
  10. Spacing between thead and tbody
  11. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  12. Padding for Inline Elements
  13. Create leading dots in CSS
  14. Why the CSS calc() function is not working? [duplicate]
  15. Flushing footer to bottom of the page, twitter bootstrap
  16. How to make Internet Explorer 8 to support nth child() CSS element?
  17. @Media min-width & max-width
  18. What do these double-dash-prefixed CSS properties do? [duplicate]
  19. Actual table Vs. Div table
  20. Creating CSS Global Variables : Stylesheet theme management [duplicate]
  21. css framework for an app with existing stylesheet
  22. Browser support for CSS :first-child and :last-child
  23. Background with 2 colors in JavaFX?
  24. Apply different css stylesheet for different parts of the same web page [duplicate]
  25. Using background-attachment:fixed in safari on the ipad
  26. How to create the masonry effects with just bootstrap 3 grid system and css
  27. How can I change the order of Bootstrap columns?
  28. CSS: 100% font size – 100% of what?
  29. css: the meaning of * mark
  30. input type=”image” shows unwanted border in Chrome and broken link in IE7

Leave a Comment