Question

我使用html表格屏幕，左侧面板显示图像和右侧面板想要显示文本框，但文本框不显示td标签的中心，这个HTML代码：

<table style="width:100vw">
    <tr>
        <td style="width:50vw;height:100vh;" align="left">
            <img src="../Content/45.png" style="display:block;max-width:50vw;max-height:100vh" />
        </td>
        <td style="width:50vh;text-align:center;">
            <div style="top:50%;">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
        </td>
    </tr>
</table>

这是我的输出：

但我想要这个输出：

我该如何解决？

Answer 1

您使用的div是一个块元素，因此将使用其父元素的全宽。

根据评论更新了基础：

对于垂直对齐，请使用vertical-align: middle，将CSS规则更新为此

td { padding: 0; vertical-align: middle; }

对于水平对齐：

在您的情况下，您需要在text-align: center而不是div上设置td，例如<div style="top:50%;text-align:center;">

html, body {
  margin: 0;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0;
  vertical-align: middle;
}

<table style="width:100vw">
  <tr>
    <td style="width:50vw;height:100vh;" align="center">
      <img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
    </td>
    <td style="width:50vh;">
      <div style="top:50%;text-align:center;">
        <input ID="TextBox1" type="text">
      </div>
    </td>
  </tr>
</table>

或制作div display: inline-block，<div style="top:50%;display: inline-block">

html, body {
  margin: 0;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0;
  vertical-align: middle;
}

<table style="width:100vw">
  <tr>
    <td style="width:50vw;height:100vh;" align="center">
      <img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
    </td>
    <td style="width:50vh;text-align:center;">
      <div style="top:50%;display: inline-block">
        <input ID="TextBox1" type="text">
      </div>
    </td>
  </tr>
</table>

我可以建议你把所有的样式放在CSS而不是标记中。从长远来看，您可以更轻松地进行维护，并使代码更易于阅读，并且不易出错。

html, body {
  margin: 0;
}
table {
  width: 100vw;
  border-collapse: collapse;
}
td {
  width:50vw;
  height:100vh;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}
.image {
  display:block;
  max-width:50vw;
  max-height:100vh;
}

<table>
  <tr>
    <td>
      <img class="image" src="http://lorempixel.com/600/600/animals" />
    </td>
    <td>
      <div>
        <input id="TextBox1" type="text">
      </div>
    </td>
  </tr>
</table>

Answer 2

您只需将 css 属性添加到 td ，即 vertical-align: middle;

＆＃13;

html, body {
  margin: 0;
}
table {
  border-collapse: collapse;
}
td {
  vertical-align: middle;
}

＆＃13;

<table style="width:100vw">
  <tr>
    <td>
      <img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
    </td>
    <td>
        <input ID="TextBox1" type="text">
    </td>
  </tr>
</table>

＆＃13;

Answer 3

<td style = "vertical-align:middle" >

Answer 4

<td>
   <div style="top:50%;">
     <asp:TextBox ID="TextBox1" runat="server">
     </asp:TextBox>

   </div>
</td>

在顶部放<table align="center">，然后放入此td标记

Answer 5

将它放在中心你应该这样做：

 <table align="center">

如何在html表中将文本框设置为td标记的中心？

5 个答案: