ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSの下部を一致させるにはどうすればよいですか? CSSの3つのセンタリング方法
CSSの下部を一致させるにはどうすればよいですか? CSSの3つのセンタリング方法
- 云罗郡主転載
- 2018-10-22 14:37:398706ブラウズ
この記事の内容はcssの下端をどうやって合わせるか？ CSS の 3 つのセンタリング方法は、参考になると思います。
ある日、チームリーダーが私に、テーブルのスタイルを変更して、一番下のラウンドを要求するように頼みました。当時はとても簡単だと思って書き始めましたが、何をやっても効果が得られないことがわかりました（ブラウザのスケーリングを考慮）。考えて議論した結果、一番下のゲームについては 3 つの方法を思いつきました。
1. フォームの親要素を {width: 60%; margin: 0 auto;}
コードは次のとおりです。 #div を作成します。フォームはページの中央部分のみを占めるため、フォームが下部にある限り、
テキストエリアを埋めて、input=submit width を width=60% にして下部に到達します。 。
2. text-align:center;これは、ページをレイアウトするときに非常に強力な属性です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*
{
padding: 0;
margin: 0;
}
.main{
width: 60%;
margin:0 auto;
}
form{
position:fixed;
bottom: 0;
width: 60%;
display: block;
}
textarea
{
width: 80%;
}
input{
width: 12%;
height: 10%;
position: relative;
bottom:24px;
}
</style>
<body>
<div >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>
</body>
</html>フォームの幅が全体 text-align:center を使用して画面を中央に配置し、下部に固定します。
3. left:50%;margin-left:-half body;これは非常に簡単で簡単な方法です
*
{
padding: 0;
margin: 0;
}
.main{
width: 100%;
}
form{
position:fixed;
bottom: 0;
width: 100%;
text-align: center;
}
input{
position: relative;
bottom:24px;
}css :
<div class="main" >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>ウィンドウをどれだけ拡大または縮小しても、テーブルは中央に配置されます。重要な点は、margin-left= - テーブルの半分 px
です。上は CSS の下部がどのようになっているかです。 ゲーム内で? CSS の 3 つの中央揃え方法の完全な紹介
CSS ビデオ チュートリアルについて詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がCSSの下部を一致させるにはどうすればよいですか? CSSの3つのセンタリング方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。