水平および垂直に絶対配置された要素を中央に配置する方法
この記事では主に、絶対配置された要素の水平方向と垂直方向の中央揃えの方法を紹介します。参考として、必要な友達は一緒に見てください
1.css の欠点: が必要です。要素の幅と高さを事前に知っておく必要があります。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
注: 要素のサイズに関係なく、中央揃えにすることができます。ただし、この書き込み方法はIE8以降にのみ対応しており、モバイル端末では無視して構いません。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7677
15
1393
52
1207
24
91
11
3060グラフィックスカードの性能はどうですか？
Jan 27, 2024 am 10:36 AM
多くのゲーマーはグラフィックス カード 3060 に非常に興味があり、3060 ディスプレイを購入したいと考えていますが、RTX3060 がどのレベルにあるのか知りません。実際、このグラフィックス カードも比較的主流のレベルにあります。 3060 グラフィックス カードのレベルは何ですか: 回答: メインストリーム レベル。この RTX3060 グラフィックス カードは、プレイヤーの間で非常に人気があり、セールも行われており、RTX30 シリーズの独自の利点を備え、非常にコスト効率が高く、ゲーム グラフィックスに対する要求が高いプレイヤーはこのグラフィックス カードを選択できます。 3060 グラフィックス カード拡張の紹介: フレーム レート: ほとんどのプレイヤーに愛されており、12 GB の大容量ビデオ メモリを備えており、非常に人気があります。 12 GB の大容量ビデオ メモリを搭載し、AAA の傑作を遅延なくスムーズに実行でき、フレーム レートは 60 に達することもあります。お金の価値: それ
WPSテーブルセンタリングの設定方法
Mar 19, 2024 pm 09:34 PM
WPSの機能が強力になるにつれ、機能の使用に関する問題が増えてきました。 WPS では WPS テーブルをよく使用しますが、WPS テーブルを印刷する必要がある場合、テーブルを美しく見せるために、この時点でテーブルを中央に配置する必要があります。そこで問題は、WPS テーブルをどのように中央に配置するかということです。今日はここでチュートリアルを共有します。お役に立てれば幸いです。手順詳細: 1. 実際の操作で説明します 以下は、WPS テーブルを使用して作成した簡単なテーブルです。 2. 印刷プレビューを通じて、WPS テーブルがデフォルトで左側にあることがわかります。テーブルを中央に配置したい場合はどうすればよいでしょうか? 3. このとき、[ツールバー]の[ページレイアウト]をクリックする必要があります。
Kirin 9000の性能とレベルを評価する
Mar 18, 2024 pm 03:21 PM
今年の携帯電話市場の新星として、Kirin 9000s が大きな注目を集めています。スマートフォン市場の競争が激化する中、ファーウェイのフラッグシッププロセッサとして常に注目を集めてきたKirinシリーズ。最新のプロセッサーである Kirin 9000 はどのようなパフォーマンスを発揮するのでしょうか?そのパフォーマンスとレベルはどのようなものですか?以下では、Kirin 9000 を評価し、その長所と短所をさまざまな側面から分析します。まずパフォーマンスの観点から見ると、Kirin 9000 は高度な 5nm プロセスを使用して製造され、ARM の最新の Co
div を別の div の中央に配置するにはどうすればよいですか?
Sep 08, 2023 am 11:13 AM
はじめに div の中央揃えは、フロントエンド開発の最も重要な側面の 1 つです。この記事では、HTML と CSS を使用して、ある div を別の div の中に配置するテクニックを見ていきます。このチュートリアルでは、子 div を持つ必要がある親 div を作成します。私たちのタスクは、子 div を親 div の中央に配置することです。 Transform の変換と位置の構文を使用することは、ある div を別の div に中央揃えするあまり一般的な方法ではありません。 構文 left:50%;top:50%;Transform:translate(-50%,-50%);above この構文は次のことを行います。以下 - CSS ルール「left:50%;」により、要素の水平位置が次のように設定されます。
ハウツー: Win11 タスクバー アイコンのサイズを変更して中央揃えにする方法
Jan 03, 2024 am 08:17 AM
Win11 では、タスク バーの変更など、まったく新しいインターフェイスが導入されました。しかし、多くのユーザーは、タスク バー アイコンが大きすぎて、使い慣れないと感じています。そのため、以下では、Win11 のタスク バー アイコンを中央に配置して変更します。 . ちょっとした操作方法を一緒に学びましょう。 win11 で中央のタスクバー アイコンを小さくする方法: 1. まず、レジストリ エディターを開く必要があります。 2. 次に、HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\ を展開します。 3. 次に、右側に「TaskbarSi」という新しい DWORD 値を作成し、追加します
CSS で水平スクロール可能なセクションを作成する
Aug 29, 2023 am 09:29 AM
水平方向にスクロール可能なセクションは、ビューポートの幅を超えるコンテンツを表示するために使用される一般的な Web デザイン パターンです。このデザイン パターンにより、ユーザーは水平方向にスクロールでき、大きな画像、ギャラリー、タイムライン、地図、その他のコンテンツを表示するユニークで魅力的な方法が提供されます。これは、overflow-x:auto や overflow-x:scroll などの CSS プロパティを使用して実現されます。これは、水平スクロールにネイティブのブラウザー機能を使用し、デバイス間で応答します。コンテンツのナビゲーションと探索が簡単に行えます。追加のライブラリやプラグインは必要ありません。このアルゴリズムは、「コンテナ」クラスを使用してコンテナ要素を定義します。コンテナの「overflow−x」プロパティを「auto」に設定して、水平スクロールを有効にします。容器
CSS のヒント: 中央揃えのレイアウトを実装する方法
Oct 20, 2023 pm 04:36 PM
CSS のヒント: 中央揃えのレイアウトを実装する方法 Web デザインでは、中央揃えのレイアウトがよく使用されます。テキスト、画像、またはページ全体のレイアウトを中央揃えにするかどうかは、すべて CSS を通じて実現できます。この記事では、中央揃えのレイアウトを実現するためのいくつかの CSS テクニックを紹介し、具体的なコード例を示します。まず、水平方向中央レイアウトを実装する方法を見てみましょう。いくつかの一般的な要素のコード例を次に示します。 Text-center 配置: .text-center{text-align:ce
フロントエンドのスキル共有: CSS3 フィットコンテンツを使用して要素を水平方向に中央揃えにします
Sep 09, 2023 pm 01:36 PM
フロントエンド スキルの共有: CSS3fit-content を使用して要素を水平方向に中央揃えにする フロントエンド開発では、要素を水平方向に中央揃えにする必要がある状況によく遭遇します。この効果は、CSS3 の Fit-content プロパティを使用して簡単に実現できます。この記事では、fit-content 属性の使用方法とコード例を紹介します。 fit-content 属性は要素の親コンテナに対する相対的な長さの値であり、コンテンツの実際のサイズに基づいて要素の幅を自動的に計算できます。要素を変換すると
