將文本垂直對齊到div的中心

Question

我想將文本對齊到div的中間。 我有以下幾點：

<div class="col-md-6 article-headline-quote-container">
                <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
            </div>

我讀了其他文章，並修改了CSS，所以現在是：

.article-headline-quote-container {
   display: table-cell;
   vertical-align: middle;
}

.article-headline-quote {
  font-size: 36px;
  display: block;
}

但是文本在div的中間未對齊。 有什么幫助嗎？ 我做錯了什么？

Answer 1

您的HTML

<div class="col-md-6 article-headline-quote-container">
                <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
            </div>

使用此CSS

.article-headline-quote-container {
       display: table;
       text-align: center; /* for centering horizontally */
       height:110px; background:#ff0;
    /* for testing only */
    height: 300px;
    }

    .article-headline-quote {
      font-size: 36px;
      display: table-cell;
       vertical-align: middle;
    }

這是一個小提琴-為您提供http://jsfiddle.net/4Dsq9/1/

Answer 2

用這個：

<div class="col-md-6 article-headline-quote-container">
    <div class="middle"></div>
    <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
</div>

和你的CSS是這樣的：

.article-headline-quote-container{position: relative}
.middle, .article-headline-quote{display: inline-block; vertical-align: middle;position: relative; max-width: 99%}
.middle{height: 99%;}

演示： http : //jsfiddle.net/masqueradecircus/5KrRH/