Вертикальное выравнивание предложение в сНу Bootstrap 3

Question

Так я использую последнюю realse бутстраповского и у меня есть следующие Див

<div class="col-sm-6 col-md-2 col-lg-8 memory textContainer"> 
    <p>{{ $memory->description }}</p> 
</div> 

maxiumum предложение 200 символов, так просто не поместятся в одном line.For мой vertical align У меня есть следующий CSS.

.textContainer { 
    height: 200px; 
    line-height: 200px; 
} 

.textContainer p { 
    height: 200px; 
} 

Это работает, но не тогда, когда предложение уже тогда одна линия, потому что тогда spaceing между двумя линиями 200px как хорошо, как на следующем рисунке.

Есть работа вокруг этой проблемы? Большое спасибо!

Answer 1

Какой перекрестной совместимости браузера вы после? Принятый ответ не будет хорошо работать в браузерах, которые не поддерживают преобразования css3. Если вам необходимо поддерживать старые браузеры попробовать это:

<div class="col-sm-6 col-md-2 col-lg-8 memory textContainer"> 

    <div class="centered"> 
    <p>{{ $memory->description }}</p> 
    </div> 

</div> 

.textContainer { 
height: 200px; 
} 
/* The ghost, nudged to maintain perfect centering */ 
.textContainer:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 

исх: https://css-tricks.com/centering-in-the-unknown/

Answer 2

Это работает для вас?

.textContainer { 
 
    height: 200px; 
 
    background: silver; 
 
    position: relative; 
 
} 
 
.textContainer p { 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="textContainer"> 
 
    <p>content content content content content content content content content content content content content content content</p> 
 
</div>