Question

设置垂直对齐div内容的问题例如：

postUrl="path/path"

https://jsfiddle.net/lymychm/cuv10dqo/

我想在div中垂直显示文字。

因此，如果我将行高设置为<div class="row border"> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1"> <span class="align-middle">Short</span> </div> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 "> <span class="align-middle">Long col with long text</span> </div>它可以工作，但是当文本中有许多单词之间有空格时...每个单词现在从新行开始，而这行（每行）具有相同的行高

实施例： https://jsfiddle.net/lymychm/prc2rstd/

这就是我想要的，但在span https://jsfiddle.net/lymychm/zn48z0ex/

Answer 1

.border {
  border: 1px solid red;
}

.line-height-class {
  line-height: 120px;
}
.abc { display: table;
    width: 100px; /* width of parent */
    height:100px; /* height of parent */
    overflow: hidden; }
.inner {
     display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

<div class="row border">
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 abc">
      <span class="align-middle inner">Short</span>
    </div>
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
      <span class="align-middle">Long col with long text</span>
    </div>   
</div>

Answer 2

使用flexbox，请参阅示例：https://jsfiddle.net/prc2rstd/6/

HTML，

<div class="box">
  <div class="row align-middle">
      <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 column">
        <span>Short</span>
      </div>
      <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 column">
        <span>Long col with long text</span>
      </div>   
  </div>
</div>

CSS，

.box {
  border: 1px solid red;
  width: auto;
  padding: 20px;
  display: inline-block;
}

.align-middle {
  display: flex;
  align-items: center;
}

.column {
  width: 70px;
}

Answer 3

当使用float：left时，很难使其垂直对齐中间。我们需要将row定义为一个表，将其内部div定义为表格单元格，并从中删除浮点数。但不知何故，我们有另一种好方法，即使用flexbox，演示https://jsfiddle.net/anmolsandal/cuv10dqo/1/

更新了css

.border {
 border: 1px solid red;
 display: flex;
 align-items: center;
}

.line-height-class {
  line-height: 120px;
}

码

 <div class="row border">
   <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
     <span class="align-middle">Short</span>
   </div>
   <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
     <span class="align-middle">Long col with long text</span>
   </div>
 </div>

Answer 4

您可以在css中添加此代码，

.col-lg-1 {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

更改该班级名称......

Answer 5

扩展div的宽度，如this fiddle.

＆＃13;

.border {
  border: 1px solid red;
}

.line-height-class {
  line-height: 120px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row border">
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
      <span class="align-middle line-height-class">Short</span>
    </div>
    <div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 ">
      <span class="align-middle line-height-class">Long col with long text</span>
    </div>   
</div>

＆＃13;

Bootstrap div作为表td，中间文本

5 个答案: