Wie passt man den unteren Teil des CSS an? CSS drei Zentriermethoden-CSS-Tutorial-php.cn

Wie passt man den unteren Teil des CSS an? CSS drei Zentriermethoden

云罗郡主

Freigeben： 2018-10-22 14:44:30

nach vorne

8721 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man den unteren Teil des CSS einpasst. Die drei Zentrierungsmethoden von CSS haben einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich sind.

Eines Tages bat mich der Teamleiter, den Stil eines Tisches zu ändern und nach der unteren Runde zu fragen. Ich dachte damals, es sei sehr einfach, also begann ich, es zu schreiben, stellte jedoch fest, dass es, egal was ich tat, den Effekt nicht erzielen konnte (unter Berücksichtigung des Browser-Zooms). Nach einigem Nachdenken und Diskutieren kam ich auf drei Methoden für das Grundspiel.

1. Legen Sie das übergeordnete Element des Formulars fest: {width: 60%; margin: 0 auto;}

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

macht das Div. Das Formular nimmt nur den mittleren Teil der Seite ein. Solange sich das Formular also unten befindet,

Verbreiten Sie den Textbereich und geben Sie die Breite ein, um sie auf Breite = 60 % zu senden, um den unteren Teil zu erreichen .

2. text-align:center;

Dies ist ein sehr leistungsfähiges Attribut beim Layouten der Seite

*
    {
        padding: 0;
        margin: 0;
    }
    .main{
       width: 100%;
    }
    form{
        position:fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
    }
    input{
        position: relative;
        bottom:24px;
    }

Nach dem Login kopieren

Wenn die Formularbreite das ausfüllt Whole Verwenden Sie text-align:center, um den Bildschirm zu zentrieren, und fixieren Sie ihn dann am unteren Rand.

3. Verwenden Sie left:50%;margin-left: -half body;

Dies ist eine sehr einfache und schnelle Methode

<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>

Nach dem Login kopieren

css :

*{
            padding: 0 ;
            margin:0;
        }
        form{
            position: fixed;
            bottom: 0;
            left: 50%;/*相对于可视区窗口，距离窗口左边50%个可视区窗口*/
            margin-left:-237px ;/*表格左边距离浏览器左边50%，向左偏移一半的身位表格即可居中*/
        }

Nach dem Login kopieren

Egal wie stark das Fenster vergrößert oder verkleinert wird, der entscheidende Punkt ist margin-left= - die Hälfte der Tabellen-Pixel

Der Oben sehen Sie, wie der untere Teil des CSS im Spiel aussieht? Eine vollständige Einführung in die drei Zentrierungsmethoden von CSS. Wenn Sie mehr über das CSS-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie passt man den unteren Teil des CSS an? CSS drei Zentriermethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!