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/

垂直对齐文本到div的中心

2 个答案: