cssの縦方向の位置合わせ

この質問は回答の可能性があり、愚かなことかもしれません。テキスト、画像、divのいずれの要素であっても、垂直方向に中央に整列する要素を整列させたいと思います。また、応答する画面でも機能する必要があります。手動のパーセンテージをマージン・トップに追加して試してみました。私は、垂直アラインメントを反応させるための単純かつ最良の方法があるかどうかを知りたいと思います。cssの縦方向の位置合わせ

私はGoogleについていくつかの研究をしましたが、その中にはコンテナの表示プロパティをtableに変更し、divを表のセルに変更し、垂直方向の配置を中央として使用することを提案しました。これはシンプルに聞こえますが、ページ内の他の要素にも影響を与えます。私はテーブルになりたくありません。したがって、私は最良の代替オプションを探しています。助けてください。事前にありがとう:)

.in-middle{ 
 
    width:100%; 
 
    margin-top: 25%; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

出典

2016-11-10 Harish

あなたはtranformプロパティを使用して、以下のソリューションを使用することができます。

.in-middle{ 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
</div>

margin-topを使用することをお勧めしませんの代わりに10を要素の垂直方向に配置します。

出典

2016-11-10 08:34:01

これは動作します。ありがとうございました。あなたのコードをチェックした後、私はマージントップも変換プロパティの代わりに使用できると思った。それはうまくいくのだろうか？ – Harish

私は参照してください。私に教えてくれてありがとう。 – Harish

position: absolute; 
    top: 50%; 
    transform: translateY(-50%);

これは要素を垂直方向に中央に配置します。

.in-middle{ 
 
    width:100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

出典

2016-11-10 08:35:18

あなたはCSS3 flexboxを使用する必要があります。コンテンツは縦横に配置され、それに続くコンテンツには重複しません。フレキシボックスで

body { 
 
    margin: 0; 
 
} 
 
.in-middle { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: flex; 
 
    height: 100vh; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet...</p> 
 
</body>

出典

2016-11-10 08:43:08

ありがとうございます。それはすべてのブラウザでサポートされますか？ – Harish

@ハリッシュはい、IE10 +と他のブラウザのほとんどがそれをサポートしています。 –

ありがとうございます。私はそれを試してみましょう。 – Harish

：

.in-middle { 
    height: 100%;  
    display: flex; 
    align-items: center; 
} 

<body> 
    <div class="in-middle"> 
     <h1>This should be aligned in the center</h1> 
     <p>Paragraph which should also be centered</p> 
    </div> 
</body>

出典

2016-11-10 08:43:34 Alex

cssの縦方向の位置合わせ

答えて

関連する問題