css single or multiple line vertical align

by

For this you can use display:table-cell property:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}
<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

But it works IE8 & above. Read this article for more info: CSS Tricks: Vertically Center Multi-Lined Text.

More Related Contents:

  1. Change select box option background color
  2. Fix footer to bottom of page
  3. Li item on two lines. Second line has no margin
  4. When to use the !important property in CSS [duplicate]
  5. Force flex item to span full row width
  6. Add a background image (.png) to a SVG circle shape
  7. Removing body margin in CSS
  8. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  9. Google Fonts are not rendering on Google Chrome
  10. Inline elements and line-height
  11. Tables instead of DIVs [duplicate]
  12. Is type=”text/css” necessary in a tag?
  13. Text overflow ellipsis on two lines
  14. Using CSS to insert text
  15. How can I make a link from a table cell
  16. Flexbox affects overflow-wrap behavior
  17. How does one use the onerror attribute of an img element
  18. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  19. How can I make a 45 degree responsive ribbon with folded corner?
  20. Border with a transparent centred arrow
  21. Add outward curving border to elements like this: ◝◟___◞◜
  22. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  23. How to move placeholder to top on focus AND while typing?
  24. HTML/CSS set div to height of sibling
  25. Should Tables be avoided in HTML at any cost?
  26. CSS/HTML: What is the correct way to make text italic?
  27. svg background image position is always centered in internet explorer, despite background-position: left center;
  28. Make Div Draggable using CSS
  29. Link external CSS file only for specific Div [duplicate]
  30. How can I get a specific number child using CSS?

Leave a Comment