您如何使用 css/Javascript 垂直对齐文本？

Question

我们的网站上有一个 div，想要垂直对齐其中的文本（不是垂直对齐或居中对齐）。

这是一个基本示例（使用 Bootstrap 3+，顺便说一句）：

<div class="row">
    <div class="col-xs-12 col-sm-4 v-justify">
        this is our text that we need verticlaly justified.  lorem ipsum dolor amet, etc...
    </div>
    <div class="col-xs-12 col-sm-4 portCell">
        This is a div with a responsive image in it so we don't know the height.
        For arguments sake we'll say 300px
    </div>
    <div class="col-xs-12 col-sm-4 portCell">
        This is a another div with a responsive image in it so we don't know the height.
        For arguments sake we'll say 300px
    </div>
</div>

我们如何才能让第一个 DIV 中的文本垂直对齐。仅 CSS 解决方案的奖励积分，具有媒体查询友好的样式以提供完整的设备支持。

根据 Andrew Rockwell 的解决方案回答

这通过 class（v-justify）循环，所以我们可以将它应用到我们网站上的多个区域。

$('.v-justify').each(function(){
    var justify = $(this);
    var maxHeight = justify.parent().next('.portCell').height();
    var fontSize = 1.5;
    while ( maxHeight > justify.height() ) {
          justify.css('font-size', (fontSize+=1.7) + 'px');
     }
});

Answer 1

CSS Flexbox 使将内容对齐到网格状结构比以往任何时候都容易得多，但它有一点学习曲线。

如果您查看 CSS 评论，您可以将 space-around 替换为 space-between 以使内容触及其容器的顶部和底部以及 space将在元素之间平均分配。

并且，根据您的要求，这些类可以根据需要在媒体查询中换出。

       /* Flexbox is based on the concept that the flex "boxes"
           be inside of a container element.
        */
       .flex-container {
         border:3px solid green;
         list-style:none;
         display:flex; 
         height:200px;
          width:500px;
          padding:0;
          margin:0;


          /* THIS IS WHAT GIVES US THE EVEN SPACING
             YOU CAN REPLACE "space-around" with "space-between"
             TO GET A SLIGHTLY DIFFERENT JUSTIFICATION   */
       justify-content:space-around; 

          /* This gives us columns as opposed to rows: */
          flex-direction:column;
       }

        /* ...and, then the container contains the
           flexbox items.
        */
       .flex-item {
          background:tomato;
          font-weight:bold;
          font-size:.7em;
          text-align:center;
          border:2px dashed black;
          height:20px;
           width:100%;
       }

     <ul class="flex-container">
       <li class="flex-item one">One</li>
       <li class="flex-item two">Two</li>
       <li class="flex-item three">Three</li>
       <li class="flex-item four">Four</li>
     </ul>

Answer 2

怎么样： https://jsfiddle.net/sp3rLang/4/

var justify = document.getElementById('v-justify');
var maxHeight = justify.parentElement.clientHeight;
var fontSize = 1;
while ( maxHeight > justify.clientHeight ) {
    justify.style.fontSize = fontSize++ + 'px';
}
// the while loop will always break a font size over the maxHeight
justify.style.fontSize = ( fontSize - 1 ) + 'px';

您如何使用 css/Javascript 垂直对齐文本？

How would you vertically justify text with css/Javascript?

javascript

css

text-justify

根据 Andrew Rockwell 的解决方案回答