水平および垂直に絶対配置された要素を中央に配置する方法
この記事では主に、絶対配置された要素の水平方向と垂直方向の中央揃えの方法を紹介します。参考として、必要な友達は一緒に見てください
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衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7346
15
1627
14
1352
52
1265
25
1214
29
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 値を作成し、追加します
HTMLでテキストボックスを中央に配置する方法
Feb 19, 2024 pm 11:01 PM
HTML テキスト ボックスを中央揃えにする方法には、特定のコード サンプルが必要です。Web デザインでは、要素を中央揃えにすることが一般的なレイアウト要件です。 HTML テキスト ボックスの場合、中央に表示する方法がいくつかあります。以下では、一般的に使用されるセンタリング方法を詳しく紹介し、具体的なコード例を添付します。方法 1: CSS スタイル シートの centering 属性を使用する テキスト ボックスを中央揃えで表示するには、CSS スタイル シートの text-align 属性を使用します。テキスト ボックスが配置されている親コンテナ要素を中央揃えに設定します。
CSS で水平スクロール可能なセクションを作成する
Aug 29, 2023 am 09:29 AM
水平方向にスクロール可能なセクションは、ビューポートの幅を超えるコンテンツを表示するために使用される一般的な Web デザイン パターンです。このデザイン パターンにより、ユーザーは水平方向にスクロールでき、大きな画像、ギャラリー、タイムライン、地図、その他のコンテンツを表示するユニークで魅力的な方法が提供されます。これは、overflow-x:auto や overflow-x:scroll などの CSS プロパティを使用して実現されます。これは、水平スクロールにネイティブのブラウザー機能を使用し、デバイス間で応答します。コンテンツのナビゲーションと探索が簡単に行えます。追加のライブラリやプラグインは必要ありません。このアルゴリズムは、「コンテナ」クラスを使用してコンテナ要素を定義します。コンテナの「overflow−x」プロパティを「auto」に設定して、水平スクロールを有効にします。容器
3 点を結ぶのに必要な水平または垂直の線分の数
Aug 25, 2023 pm 04:49 PM
3 つの異なる点 (または座標) が与えられたとして、これら 3 つの点を接続することによって形成できる水平または垂直の線分の数を見つけたいとします。このような線分はポリラインとも呼ばれます。この問題を解決するには、計算幾何学の概念が必要です。この記事では、C++ でこの問題を解決するさまざまな方法について説明します。入力シナリオと出力シナリオでは、c1、c2、および c3 がデカルト平面上の 3 点の座標であると仮定します。この3点を結ぶ水平または垂直の線分の数は以下のようになります。入力:c1=(-1,-1)、c2=(-2,3)、c3=(4,3)出力:1入力:c1=(1,-1)、c2=(1,3)、c3 =(4,3)出力:2入力:c1=
