CSS: Center block, but align contents to the left

by

First, create a parent div that centers its child content with text-align: center. Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>

If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:

max-width: 250px;

More Related Contents:

  1. How to align a to the middle (horizontally/width) of the page [duplicate]
  2. Center multiple images horizontally in CSS
  3. How can I center an absolutely positioned element in a div?
  4. What’s the difference between align-content and align-items?
  5. Align elements side by side
  6. How to vertically center inside the parent element with CSS? [duplicate]
  7. How can I align one item right with flexbox?
  8. Center a div in CSS [closed]
  9. Center aligning a fixed position div
  10. Make child visible outside an overflow:hidden parent
  11. Bootstrap 3 modal vertical position center
  12. How to center absolute div horizontally using CSS?
  13. Vertical and horizontal align (middle and center) with CSS [duplicate]
  14. Center form submit buttons HTML / CSS
  15. How to align nav items to the right in Bootstrap 5?
  16. How to position a div in the middle of the screen when the page is bigger than the screen
  17. Make floating child visible outside an overflow:hidden parent
  18. Difference between flex-end and end? [duplicate]
  19. Align vertically using CSS 3
  20. Align button at the bottom of div using CSS
  21. Center fixed div with dynamic width (CSS)
  22. How can i make this wave effect on both bottom and top
  23. Why is a flex item limited to parent size?
  24. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  25. CSS: Set a background color which is 50% of the width of the window
  26. Does element width include padding?
  27. Cols, colgroups and css “:hover” pseudoclass
  28. Why does the linear-gradient disappear when I make an element position:absolute?
  29. Maintain div aspect ratio according to height
  30. Does Internet Explorer support CSS transitions?

Leave a Comment