CSSの下部を一致させるにはどうすればよいですか? CSSの3つのセンタリング方法-CSSチュートリアル-php.cn

CSSの下部を一致させるにはどうすればよいですか? CSSの3つのセンタリング方法

云罗郡主

リリース： 2018-10-22 14:44:30

転載

8692 人が閲覧しました

この記事の内容は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 サイトの他の関連記事を参照してください。