0

我们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 的解决方案

这按类循环（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');
     }
});
4

2 回答 2

1

这是怎么回事： 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';
于 2016-11-21T23:45:18.527 回答
0

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

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

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

       /* 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>

于 2016-11-21T20:53:49.727 回答