Maison > Article > interface Web > Comment faire correspondre le bas du CSS ? css trois méthodes de centrage
Comment faire correspondre le bas du CSS ? css trois méthodes de centrage
- 云罗郡主avant
- 2018-10-22 14:37:398686parcourir
Le contenu de cet article explique comment ajuster le bas du CSS ? Les trois méthodes de centrage de CSS ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.
Un jour, le chef d'équipe m'a demandé de changer le style d'une table et de demander le tour du bas. Je pensais que c'était très simple à l'époque, alors j'ai commencé à l'écrire, mais j'ai découvert que peu importe ce que je faisais, cela ne pouvait pas produire l'effet (compte tenu du zoom du navigateur). Après réflexion et discussion, j'ai proposé trois méthodes pour le jeu du bas.
1. Définissez {width: 60%; margin: 0 auto;} pour l'élément parent du formulaire
Le code est le suivant
<!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>pour que le div et le formulaire n'occupent que la partie médiane de la page, donc tant que le formulaire est en bas,
Étalez la zone de texte et input=submit width to width=60% à atteindre le fond.
2. text-align:center;
C'est un attribut très puissant lors de la mise en page de la page
*
{
padding: 0;
margin: 0;
}
.main{
width: 100%;
}
form{
position:fixed;
bottom: 0;
width: 100%;
text-align: center;
}
input{
position: relative;
bottom:24px;
}Lorsque la largeur du formulaire est pavé Lorsque tout l'écran est rempli, text-align: center est utilisé pour le centrer, puis il est fixé en bas.
3. Utilisez left:50%;margin-left:-half body;
C'est une méthode très simple et rapide
<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>css :
*{
padding: 0 ;
margin:0;
}
form{
position: fixed;
bottom: 0;
left: 50%;/*相对于可视区窗口，距离窗口左边50%个可视区窗口*/
margin-left:-237px ;/*表格左边距离浏览器左边50%，向左偏移一半的身位表格即可居中*/
}Peu importe le zoom avant ou arrière de la fenêtre, le tableau sera centré. Le point clé est margin-left= - la moitié du tableau px
.Ce qui précède est Comment ajuster le bas du CSS ? Une introduction complète aux trois méthodes de centrage de CSS Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!