CSSは位置+マージンを使用して、固定ボックスの水平および垂直の中央揃えの方法を実現します。
|
margin:auto; + position: absolute; 上、下、左、右:0
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<メタ文字セット="utf-8">
<meta name="ビューポート" content="初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ" />
<title>位置 + マージンを使用してボックスを水平方向と垂直方向に固定します</title>
<スタイル>
体 * {
アウトライン: 1px #ff0000 実線;
}
。父親 {
幅: 500ピクセル;
高さ: 300px;
位置: 相対的;
}
.父 .息子 {
幅: 180ピクセル;
高さ: 140px;
/* */
位置: 絶対;
右: 0;
下部: 0;
上: 0;
左: 0;
マージン: 自動;
}
</スタイル>
</head>
<本文>
<div class="父">
<div class="son">margin:auto + 上、下、左、右:0</div>
</div>
</本文>
</html>//終わり CSS で位置 + マージンを使用して固定ボックスの水平および垂直の中央揃えを実現する方法については、これで終わりです。CSS で固定ボックスの水平および垂直の中央揃えに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします
>>: Sublime Text - ブラウザのショートカットキーを設定するための推奨方法
推薦する
XHTML 入門チュートリアル: フォーム タグ
<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...
IP アドレス経由で MySql にアクセスする方法
1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...
Mysql-connector-java ドライバのバージョン問題の概要
Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...
Dockerイメージストレージoverlayfsの使用
1. 概要Docker のイメージはレイヤーで設計されています。各レイヤーは「レイヤー」と呼ばれます...
HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
Linux で iostat コマンドを使用するチュートリアル
序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...
Docker Consul コンテナ サービスの更新と見つかった問題の概要
目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...
XHTML コードで Marquee タグを使用する方法
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...
SQL と NoSQL の違いのまとめ
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
Centos7.2 で mysql5.7 データベースをインストールするための詳細な手順
サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...
MySQLカバーインデックスの詳しい説明
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
CSS で 3D ブック効果を実装するためのサンプル コード
さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...
Nexusプライベートサーバー構築原理とチュートリアル分析
1つ。 Nexus プライベート サーバーを構築する理由は何ですか?社内の開発メンバーは全員外部ネッ...
Dapr を使用してマイクロサービスをゼロから簡素化する例
目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...
JSはタイムラインの自動再生を実現する
最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...