Question

我想更改其他divs内部的divs的v-align。请检查此图像以获得所需结果： Vertical align in div-table

这是我的代码：

HTML：

      <div style="font-weight:bold;" class="divhead">
          <div class="col_5 head">aaa</div>
          <div class="col_25 head">bbb</div>
          <div class="col_10 head">ccc</div>
          <div class="col_15 head">ddd</div>
          <div class="col_15 head">eee</div>
          <div class="col_10 head">fff</div>
          <div class="col_10 head">ggg</div>
          <div class="col_10 head last">hhh</div>
      </div>

      <div class="divrow">
          <div class="col_5">aaa aaa aaa</div>
          <div class="col_25">bbb bbb bbb</div>
          <div class="col_10">P:123<br>E:123</div>
          <div class="col_15">test test test test test test test test </div>
          <div class="col_15">test </div>
          <div class="col_10">ISI</div>
          <div class="col_10"><a href="link.php" title='View Profile'> Link</a> </div>
          <div class="col_10">5555</div>
      </div>

      <div class="divrow">
          <div class="col_5">aaa aaa aaa</div>
          <div class="col_25">bbb bbb bbb</div>
          <div class="col_10">P:123<br>E:123</div>
          <div class="col_15">test test test test test test test test </div>
          <div class="col_15">test </div>
          <div class="col_10">ISI</div>
          <div class="col_10"><a href="link.php" title='View Profile'> Link</a> </div>
          <div class="col_10">5555</div>
      </div>

和CSS：

.main_div {
    margin: 0 auto;
    padding: 0 0 0 0 ; 
    max-width: 1220px;
}

.divhead {
    clear: both;
    max-height:35px;
    overflow:hidden;
}

.divrow {
    clear: both;
    background:blue;
    width:100%;
    display: table;
}


.col_1 { width: 1%; }
.col_5 { width: 5%; }
.col_10 { width: 10%; }
.col_15 { width: 15%; }
.col_20 { width: 20%; }
.col_25 { width: 25%; }
.col_30 { width: 30%; }
.col_35 { width: 35%; }
.col_40 { width: 40%; }
.col_45 { width: 45%; }
.col_50 { width: 50%; }
.col_55 { width: 55%; }
.col_60 { width: 50%; }
.col_65 { width: 55%; }
.col_70 { width: 50%; }
.col_75 { width: 55%; }
.col_80 { width: 50%; }
.col_85 { width: 55%; }
.col_90 { width: 50%; }
.col_95 { width: 55%; }
.col_100 { width: 100%; }

.col_1, 
.col_5, 
.col_10, 
.col_15, 
.col_20, 
.col_25, 
.col_30, 
.col_35, 
.col_40, 
.col_45, 
.col_50, 
.col_55, 
.col_60, 
.col_65, 
.col_70, 
.col_75, 
.col_80, 
.col_85, 
.col_90, 
.col_95, 
.col_100
{
    color: #000;
    background-color:#f9f9f9;
    text-align: center;
    padding: 12px 0;
    float: right;
    margin:0;
    height:35px;
    border-bottom:1px solid #dddddd;

}


.head {
    background-color: #069;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 0;
    height:20px;
}

.divrow:hover .col_1, 
.divrow:hover .col_5, 
.divrow:hover .col_10, 
.divrow:hover .col_15, 
.divrow:hover .col_20, 
.divrow:hover .col_25, 
.divrow:hover .col_30, 
.divrow:hover .col_35, 
.divrow:hover .col_40, 
.divrow:hover .col_45, 
.divrow:hover .col_50, 
.divrow:hover .col_55, 
.divrow:hover .col_60, 
.divrow:hover .col_65, 
.divrow:hover .col_70, 
.divrow:hover .col_75, 
.divrow:hover .col_80, 
.divrow:hover .col_85, 
.divrow:hover .col_90, 
.divrow:hover .col_95, 
.divrow:hover .col_100
{
    background-color:#f1f1f1;
}

我想保持行突出显示效果。请帮我修改代码或建议新的方法。

Answer 1

您可以使用不同的方法修复它，但我认为在您的情况下最简单的方法是在每个div（单元格）上添加属性“line-height”，其大小与div相同。然后发短信居中。

您可以使用包装div，如此链接所示：

http://techwelkin.com/align-div-center-of-screen-vertically-cross-browser

在特殊代码中垂直对齐div内容（Div as table）

1 个答案: