テキストボックスをhtmlテーブルのtdタグの中央に設定するにはどうすればよいですか？

debugcn 投稿 Dev

behzad razzaqi

画面を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>

これが私の出力です：しかし、私はこの出力が欲しいです：どうすればそれを解決できますか？

Ason

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]