CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する
Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央揃えされません。ただし、CSS を追加してこれを制御し、入力されたテキストを垂直方向に中央揃えにして、Web ページをより完璧にすることができます。

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<スタイル タイプ="text/css">
#文章 {
高さ:20px;
垂直位置揃え:中央;
line-height:20px; /*line-height は height と同じである必要があります*/
}
</スタイル>
</head>
<本文>
<テーブル>
<入力タイプ="テキスト" id="テキスト">
</テーブル>
</本文>
</html>

verticla-align と line-height の 2 つの属性を追加すると、テキスト ボックス内のテキストはテキスト ボックス内で垂直方向に中央揃えされます。line-height は height と同じでなければならないことに注意してください。

<<:  4種類のMySQL接続とマルチテーブルクエリの詳細な説明

>>:  繰り返し送信、繰り返し更新、バックオフ防止に関する問題と解決策の分析

推薦する

CSS のフィルター属性とバックドロップフィルターの適用と違いの詳細な説明

フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...

MySQL の最初のインストールが成功した後にパスワードを初期化する手順

ファイルをディレクトリに解凍しますこれは解凍後のディレクトリですmy.iniファイルを入力しますダブ...

Kali Linux Vmware 仮想マシンのインストール (図とテキスト)

準備: 1. VMwareワークステーションソフトウェアをインストールする2. Kali Linux...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

ウェブデザインを改善するための 8 つの CSS ツールを共有する

ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...

JavaScript ファイルの読み込みとブロックの問題: パフォーマンス最適化のケーススタディ

まず質問させてください。HTML ページを作成するときに、外部から JS ファイルをインポートする場...

MySQL 5.7.17 最新インストールチュートリアル(画像とテキスト付き)

mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...

モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...

実践で遭遇するフロントエンドの基本(HTML、CSS)

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...

HTML の rel 属性の分析

.y { background: url(//img.jbzj.com/images/o_y.pn...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...