将文本旁边的文本垂直对齐？

Question

我有一个HTML：

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

输出是这样的：

但我想要这样的输出：

当然，我可以在<table>内加一个<td>元素，但我想知道用CSS获得解决方案。我也无法在输入处申请vertical-align:middle;。

JSFiddle：https://jsfiddle.net/Wernfried/3ph32L7a/8/

页面是动态创建的，如果需要，可以使用jQuery $("#id").width()作为选项。

Answer 1

使用css flex属性

body { 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#765452;
  margin:0px; 
  font-size:16px; 
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.calloutTitle {
  margin-left:10px;
}
.custom-class{
  display: flex;
  align-items: center;
}

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>Callout&nbsp;ID</td>
      <td class="custom-class">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer 2

试试这个：

＆＃13;

＆＃13;

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.call-out {
  display: flex;
  align-items: center;
}
.calloutTitle {
  margin-left: 1%;
}

＆＃13;

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td class="callout">Callout&nbsp;ID</td>
      <td class="call-out">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您甚至可以更改display的默认span to inline-block，这会产生差异并分别对齐input和span标记，如下所示，

＆＃13;

＆＃13;

body { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#765452;
	margin:0px; 
	font-size:16px; 
}

fieldset { margin:0.4em 0.5em; }
fieldset legend { font-weight: bold; }
fieldset table { width:auto; border-collapse:collapse; }
fieldset table td { padding:0.4em 0.75em 0.4em 0.5em; border:1px solid ActiveBorder; }
fieldset table th { padding:0.2em 1em; border-style:solid; border-color:ActiveBorder; border-width:1px 1px 2px; } 
#id{
  margin-top:5px;
}
.calloutTitle {
  width:60%;
  display:inline-block;
  vertical-align:top;
  margin-left:10px;
}

＆＃13;

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

更新 -

使用display inline-block分别对齐span文字，甚至更改vertical-align代码的默认td。

＆＃13;

＆＃13;

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}

fieldset {
  margin: 0.4em 0.5em;
}

fieldset legend {
  font-weight: bold;
}

fieldset table {
  width: auto;
  border-collapse: collapse;
}

fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}

fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}

table tr:nth-of-type(2) td{
  vertical-align:middle;
}

table tr:nth-of-type(2) td > input{
  width:150px;
}
table tr:nth-of-type(2) td > span{
  width:calc(90% - 150px);
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

＆＃13;

<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>

    <tr>
      <td>Callout&nbsp;ID</td>
      <td>
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我们只需添加以下CSS即可在不更改现有代码的情况下使其正常工作。只需使用flex并以相同的方式获得结果。

`fieldset table td {
    padding: 0.4em 0.75em 0.4em 0.5em;
    border: 1px solid ActiveBorder;
    display: flex;
}`