CSS Single or Multiple Line Vertical Align

css single or multiple line vertical align

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>

css div center multi-line text vertically and horizontally with a background image

You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px; on .innie , which is throwing off your center alignment.

I think this, what you are going for.

UPDATED

CSS

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background:url('https://placeimg.com/600/300/any')no-repeat;
    background-position: center;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    text-align: center;
}

jsFiddle Demo - https://jsfiddle.net/8dphnor5/

How to vertical-align text that runs multiple lines

Based on a proposed a solution for a similar problem here, you can do something like this.

Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.

.main-services {  overflow: auto;  padding: 17px 0 9px 0;}.main-services li {  list-style: none;  float: left;  border-right: 1px dashed #E53B00;  padding-right: 14px;}.main-services li a {  display: block;  height: 78px;  color: #ED5D04;  text-decoration: none;}.main-services li a img {  vertical-align: middle;}.main-services li a span {  display: inline-block;  vertical-align: middle;}.service-1 span { width: 85px; }.service-2 span { width: 131px; }.service-3 span { width: 151px; }

<ul class="main-services border-common">  <li class="service-1">    <a href="#">      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />      <span>Some text goes here</span>    </a>  </li>  <li class="service-2">    <a href="#">      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />      <span>More text here</span>    </a>  </li>  <li class="service-3">    <a href="#">      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />      <span>More text goes here but this text overruns</span>    </a>  </li></ul>

How to vertically center dynamically 1 or 2 lines of text with CSS?

You can accomplish this by making your wrapper div display:table: and your inner text div display:table-cell. See example below:

HTML:

<div class="wrapper">
    <div class="inner">
        One Line</br>
        Two Line</br>
        Three Line</br>
    </div>
</div>

CSS:

.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}

.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}

FIDDLE:
http://jsfiddle.net/pgwL47oy/1/

Vertical align multiple lines of li

If you can use a wrapper element, say a <nav> element, and ypu can do without IE7 and earlier support, maybe this will work for you: http://jsfiddle.net/LZfVY/1/

nav {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100px;
    background: lightblue;
    line-height: 100px;
    font-size:0;
    text-align: center;
}

ul {
    display:inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: lightblue;
    list-style: none;
    line-height: 2.2;
    font-size:16px;
}
ul li {
    display: inline;
}

ul li a {
    padding: 5px 15px;
    margin: 0 10px;
    background: lightgreen;
}

Multiple lines in a box which have ellipsis and vertical-align middle

Please check this simple solution with no additional markup:

.vertically-centered {    border: 1px solid red;    height: 6rem;    overflow: hidden;    font-weight: bold;    font-size: 2.5rem;    text-overflow: ellipsis;    width: 300px;    line-height: 1.2;    display: flex;  /* enables centering for modern non-webkit browsers */    flex-direction: column;    justify-content: space-around; /* centers for modern non-webkit browsers */    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    -webkit-box-pack: center; /* centers in -webkit-box automagically! */}

<div class="vertically-centered">vertically centered with</div><div class="vertically-centered">vertically centered with hello</div><div class="vertically-centered">one line</div>

Center single- AND multi-line li text vertically

this is a most crossbrowser solution

    li {     width           : 200px;        line-height     : 100px;        height          : 100px;     border          : 1px blue solid;            }    li span {     display    : -moz-inline-box;  /* FF2 or lower */     display    : inline-block;     /* FF3, Opera, Safari */        line-height         : normal;        vertical-align      : middle;        }        li span  { *display : inline;} /* haslayout for IE6/7 */

<ul>       <li><span>My text</span></li>       <li><span>My longer text</span></li>       <li><span>My text, but this time is really wide</span></li>       <li><span>My text, some thoughts about how much it will expand in this item.</span></li>    </ul>

CSS Single or Multiple Line Vertical Align