Question

给出以下HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Midweek Meeting Schedule</title>
<style type="text/css">
/* Column widths */
.columnTime {
    width: 7%;
}

.columnTheme1Class {
    width: 76%;
}

.columnName {
    width: 17%;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
    /* This is the default font for all cells */
    font-family: Calibri;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {
    margin-bottom: 5mm;
}

.cellTime {
    padding-left: 3mm;
    padding-right: 5mm;
    font-size: 9pt;
    font-weight: 700;
    color: gray;
}

.cellName {
    font-size: 10pt;
    font-weight: normal;
}

.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}

.tableAYFM {
    margin-bottom: 2mm;
}

.textAYFM {
    padding-left: 1mm;
    padding-top: 1mm;
    padding-bottom: 1mm;
    color: #fff;
    background-color: #c18626;
    width: 90mm;
    font-size: 10pt;
    font-weight: 700;
}

.bulletAYFM {
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 1mm;
    color: #c18626;
    font-size: 14pt;
    font-weight: normal;
}

.cellClass {
    font-size: 8pt;
    font-weight: 700;
    vertical-align: bottom;
    color: gray;
}


.textDuration {
    padding-left: 1mm;
    font-family: Calibri;
    font-size: 9pt;
    font-weight: normal;
}

.textTheme {
    font-size: 11pt;
    font-weight: normal;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting, .tableAYFM {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <table class="tableAYFM">
            <colgroup>
                <col class="columnTime" />
                <col class="columnTheme1Class" />
                <col class="columnName" />
            </colgroup>
            <tr>
                <td class="cellTime">19:49</td>
                <td>
                <div class="floatRight">
                    Student:<br />
                    Assistant:</div>
                <span class="bulletAYFM">•</span> <span class="textTheme">Initial 
                Call</span> <span class="textDuration">(2 min. or less) 
                <span lang="en-gb">THIS IS EXTRA TEXT.<br />
                I FORCE IT TO HAVE 3 LINES.<br />
                HERE IS THE REST.</span></span></td>
                <td class="cellName">Name 1<br />
                Name 2</td>
            </tr>
            </table>
    </div>
</div>

</body>

</html>

这就是它的样子（有问题的区域用黄色突出显示）：

w3schools

是否可以让div垂直对齐，无论左边有多少文本？这样可以更好地与相邻的细胞对齐吗？

谢谢。

Answer 1

您无法使用右侧的浮动元素垂直对齐：浮动元素不在流量范围内，因此无法看到＆＃34;旁边元素的高度。

但是，您可以使用两个内联块元素和CSS属性vertical-align。

<强> HTML

<td>
  <div class="left">
    <span class="bulletAYFM">•</span>
    <span class="textTheme">Initial 
    Call</span>
    <span class="textDuration">(2 min. or less) 
      <span lang="en-gb">
        THIS IS EXTRA TEXT.<br />
        I FORCE IT TO HAVE 3 LINES.<br />
        HERE IS THE REST.
      </span>
    </span>
  </div>
  <div class="right">
      Student:<br />
      Assistant:
  </div>
</td>

<强> CSS

.left {
  display: inline-block;
  width: 89%;
  vertical-align: middle;
}

.right {
  display: inline-block;
  width: 10%;
  box-sizing: border-box;
  vertical-align: middle;
  color: gray;
  padding-top: 1mm;
  padding-bottom: 1mm;
  padding-right: 2mm;
  text-align: right;
  font-size: 8pt;
  font-weight: 700;
  text-transform: none;
}

不方便的是，您必须在左侧块上指定宽度<= 100％（示例中为90％）。这是我知道垂直对齐的唯一方法（除了flexbox我不知道如何使用）。

最大的好处是它是一个真正的垂直对齐：您可以在左侧添加任意数量的文本，它仍然有用。

See demo here based on your code

Answer 2

您可以为＆＃34;位置标题添加一列＆＃34;：

＆＃13;

/* Column widths */
.columnTime {
    width: 7%;
}

.columnTheme1Class {
    width: 65%;
}

.columnName {
    width: 17%;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
    /* This is the default font for all cells */
    font-family: Calibri;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {
    margin-bottom: 5mm;
}

.cellTime {
    padding-left: 3mm;
    padding-right: 5mm;
    font-size: 9pt;
    font-weight: 700;
    color: gray;
}

.cellContent {
    border-right: none;
}

.cellPosition {
    padding-right: 5px;
    color: gray;
    text-align: right;
    border-left: none;
}
.cellPosition, .cellName {
    font-size: 10pt;
    font-weight: normal;
}

.tableAYFM {
    margin-bottom: 2mm;
}

.textAYFM {
    padding-left: 1mm;
    padding-top: 1mm;
    padding-bottom: 1mm;
    color: #fff;
    background-color: #c18626;
    width: 90mm;
    font-size: 10pt;
    font-weight: 700;
}

.bulletAYFM {
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 1mm;
    color: #c18626;
    font-size: 14pt;
    font-weight: normal;
}

.cellClass {
    font-size: 8pt;
    font-weight: 700;
    vertical-align: bottom;
    color: gray;
}


.textDuration {
    padding-left: 1mm;
    font-family: Calibri;
    font-size: 9pt;
    font-weight: normal;
}

.textTheme {
    font-size: 11pt;
    font-weight: normal;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting, .tableAYFM {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}

＆＃13;

<body>
<div class="containerPage">
    <div class="containerMeeting">
        <table class="tableAYFM">
            <colgroup>
                <col class="columnTime" />
                <col class="columnTheme1Class" />
                <col class="columnX" />
                <col class="columnName" />
            </colgroup>
            <tr>
                <td class="cellTime">19:49</td>
                <td class="cellContent">
                  <span class="bulletAYFM">•</span> <span class="textTheme">Initial 
                  Call</span> <span class="textDuration">(2 min. or less) 
                  <span lang="en-gb">THIS IS EXTRA TEXT.<br />
                  I FORCE IT TO HAVE 3 LINES.<br />
                  HERE IS THE REST.</span></span>
                </td>
                <td class="cellPosition">
                    Student:<br />
                    Assistant:
                </td>
                <td class="cellName">
                  Name 1<br />
                  Name 2
                </td>
            </tr>
        </table>
    </div>
</div>
</body>

＆＃13;

Answer 3

您可以使<tr>与众不同：

        <tr>
            <td class="cellTime">19:49</td>
            <td>
            <span class="bulletAYFM">•</span> <span class="textTheme">Initial 
            Call</span> <span class="textDuration">(2 min. or less) 
            <span lang="en-gb">THIS IS EXTRA TEXT.<br />
            I FORCE IT TO HAVE 3 LINES.<br />
            HERE IS THE REST.</span></span>
            </td>
            <td valign="middle" style="width: 15%; text-align:right;">
                Student:<br />
                Assistant:
            </td>
            <td class="cellName">Name 1<br />
            Name 2</td>
        </tr>

但是，完成此任务是一种奇怪的方式。

是否可以垂直对齐设置为右侧浮动的div？

3 个答案: