css single or multiple line vertical align

Question

I have a title that can have one or more lines.

How can I align the text vertically? If it was always one line I could just set the line-height to the container heig

Answer 1

If You want your text to be responsive, wrapping words from one to multiple lines as width is dynamically changing, mentioned above trick with inline-block helper (which have the best compability here) can be not sufficient, as .inlinehelper can push wrapping text down under itself.
Here's complete solution for such a simpel task:

HTML:

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

Notice the white-space:nowrap property, which prevents .inlinehelper and #content to wrap in relation to each other. white-space:initial on #content resets ability to wrap for span itself;

Another Option: More a matter of personal preference. You can use a pseudo element instead of .inlinehelper. Remove the .inlinehelper css rules and element and add this pseudo-element css selector:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

P.S.: I figured out that this is really old question too late, therefore let this answer be, maybe it will be helpfull for someone.

Answer 2

I like that kind of solution. I saw somewhere this trick in stackoverflow but do not remember where exactly. Very usefel! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}

<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>

Answer 3

Instead of using vertical-align: center and display: table-cell, you might want to take a look at the newer method called CSS display flex which is MUCH simpler

.box {
    width: 200px;
    height: 50px; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: red;
    
    /* Only add these 2 lines */
    display: flex;
    align-items: center;
  }

<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>

Answer 4

I really like this solution:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

Feel free to use stylesheets, and 100% for the height...

Also might have to comment out spaces between the span tags, since these are inline-blocks

Credit goes to Hades. I got it from Here

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

Note: This appears not to work with multiple line content.

Answer 5

Styling wise, a table would be the best way to layout your content (put the style tags in CSS):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

Line count will require a JS script, have a look here:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

Answer 6

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.