テキストを使用したCSSで要素を中央揃え-整列、マージンなど

このCSSチュートリアルでは、テキストとブロック要素を中央に配置する方法について説明します。レイアウトの水平方向と垂直方向に要素を中央揃えするために使用できるいくつかのトリックがあります。

テキスト要素を中央揃え

大きな要素内でテキストを中央揃えにするには、text-align: center;を使用します以下に見られるように：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       .div-class {
           text-align: center;
           background-color: lightblue;
       }
       button {
           width: 200px;
       }
   </style>
</head>
<body>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by text-align: center</p>
 
   </div>
</body>
</html>

によって中央に配置されています

ブロック要素を中央揃え：

ブロック要素の中央揃えは、<body>を使用して最もよく示されます。 HTMLドキュメントのタグ。あなたがする必要があるのは、コンテナ全体の幅を制御してから、マージンを自動に設定することです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
 
</body>
</html>

中央揃え画像：

画像を中央に配置するには、CSSセレクターで、表示をブロックに変更してから、%を使用して画像要素の幅を制御します。またはpx 。 marginを設定します auto ：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
img {
           display: block;
           margin: 20px auto;
           width: 50%;
       }
 
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
   <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
   <img src="https://www.placekitten.com/500/301" alt="kittens"/>
 
 
</body>
</html>

Divの垂直方向と水平方向の中央：

パディング：

<div>の垂直方向の中央に配置するには、それを行うにはいくつかの方法があります。まず、おそらく最も簡単なのは、<div>のパディングを調整することです。 –その後、text-align: center を使用できます段落を水平方向に中央揃えにするには：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
img {
           display: block;
           margin: 20px auto;
           width: 50%;
       }
 
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
   <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
   <img src="https://www.placekitten.com/500/301" alt="kittens"/>
 
 
</body>
</html>

行の高さ：

また、text-align：centerと組み合わせて、中心に配置するブロック要素の高さにline-heightを設定して、要素を中心に位置合わせすることもできます。複数の行がある場合は、親と子の両方でline-heightを使用し、vertical-align: middleを追加します。およびdisplay: inline-block 子供に：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-lineheight {
           line-height: 200px;
           border: 5px double ivory;
           text-align: center;
           margin-bottom: 20px;
       }
 
 
   </style>
</head>
<body>
   <div id="vertical-center-lineheight">
       <p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
   </div>
   <div id="vertical-center-lh-multiple">
       <p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block,  and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
   </div>
 
 
  
</body>
</html>

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

変換：

要素を中央に配置するもう1つの方法は、位置と変換を使用することです。親要素をposition：relativeに設定し、子要素をabsolutepositionに設定します。子要素は上部と左側に50％で配置する必要があります。次に、transformプロパティを使用してdiv内のテキストを調整します。このプロパティについては別の投稿で詳しく説明しますので、現時点で100％明確でなくても大丈夫です。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-transform {
           height: 200px;
           position: relative;
           border: 5px double ivory;
           margin-bottom: 20px;
          
       }
       #vertical-center-transform p {
           margin: 0;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }
    </style>
</head>
<body>
   <div id="vertical-center-transform">
       <p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
   </div>  
</body>
</html>

フレックスボックス：

最後に、フレックスボックスを使用して要素を中央に配置できます。表示を設定します。中央に配置する子の親要素にフレックスしてから、align-itemsとjustify-contentを使用して中央に配置します。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-flexbox {
           height: 200px;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 5px double ivory;
       }
   </style>
</head>
<body>
   <div id="vertical-center-flexbox">
       <p>I am vertically and horizontally centered in a div using flexbox.</p>
   </div>
</body>
</html>

これらは、要素をレイアウトの中央に配置する問題を解決できる最も一般的な方法です。

CSSボーダー画像

CSSFlexbox

CSSで兄弟要素を選択する
最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター（+）を使用します。ここでは、両方のセレクターが同じ親要素の子です。 CSS隣接兄弟コンビネータの構文は次のとおりです- Selector + Selector{ attribute: /*value*/ } 2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。 CSSの一般的な兄弟コンビネータの構文は次のとおりです- Selector ~ Selector{ attribute: /*value*/ }
PowerToysを使用してWindows10および11でさらに多くのことを行う方法
PowerToysは、Windows10およびWindows11用の無料のユーティリティのコレクションであり、生産性を高めるためにWindowsエクスペリエンスを合理化することを目的としています。 PowerToysは最初にWindows95、次にWindows XP向けにリリースされ、現在はWindows10および11向けのオープンソースプロジェクトとして存在しています。 PowerToysを使用すると、ファイルの名前を一括変更したり、画像のサイズを一括変更したり、アプリケーションをクイック起動したりできます。 PowerToysをダウンロードする方法と、PowerToysが提供するツール