-1
votes

Comment déplacer tout le composant HTML au centre de la page?

Je suis un débutant en HTML, je souhaite poser cette question. comment déplacer tous les éléments au centre de la page? voir l'image ci-dessous entrez la description de l'image ici


1 commentaires

Bienvenue dans Stackoverflow. Lorsque vous posez une question, essayez d'ajouter le code que vous avez écrit. Veuillez lire Comment créer un exemple minimal et reproductible et Comment poser une bonne question? et modifiez votre question en conséquence.


5 Réponses :


0
votes

Vous devez utiliser des styles css ou ajouter un attribut style = "text-align: center" à l'élément de formulaire.


0 commentaires

1
votes

Vous devez utiliser flexbox et envelopper les éléments dans un bloc avec une taille fixe.

<div class="parent">
  <div class="parent__inner">
     <!-- child items -->
  </div>
</div>
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.parent__inner {
  width: 500px;
}


3 commentaires

merci, mais je pense que je suis tellement gentil, donc je n'ai pas compris votre code.


ce sera mieux s'il y a une autre façon de faire cette fonction au lieu du code css.


Il existe de nombreux didacticiels CSS en ligne si vous en avez besoin. En bref, vous pouvez mettre le css ci-dessus dans un élément <style> dans le <head> de la page ou un lien vers celui-ci dans un fichier .css et mettre <link rel="stylesheet" type="text/css" href="style.css"> dans la tête



0
votes

Dans votre code HTML, vous pouvez utiliser la balise (cependant, vous ne pouvez pas l'utiliser dans HTML 5, car elle ne la prend pas en charge). Donc, si vous utilisez HTML 4, vous pouvez l'utiliser. Dans votre code CSS, vous pouvez utiliser "text-align: center;" (ne pas inclure les guillemets doubles)


2 commentaires

Dans votre code HTML, vous pouvez utiliser la balise , à quelle balise faites-vous référence? Veuillez ajouter quelques détails afin que votre réponse soit plus claire.


Je ne pense vraiment pas que text-align: center; est obsolète dans HTML 5



0
votes

Simplement, make div contient votre from et aligne son style: center; comme exemple ci-dessous:

<!DOCTYPE html>
<html>
<body>
<p>welcome</p>
<div style="text-align: center;">
<form>
  <label for="x1">Input x1:</label>
  <input type="text" id="x1" name="x1"><br>
  <label for="x2">Input x2:</label>
  <input type="text" id="x2" name="x2"><br>
  <button type="button">Compute</button><br>
  <button type="button">Clean</button><br>
  <label for="Midpoint">Midpoint result:</label>  
  <input type="text" id="Midpoint" name="Midpoint" placeholder="Try again"><br>
</form>
</div>
</body>
</html>


1 commentaires

merci beaucoup, ça marche, puis-je changer le rayon des zones de texte?



0
votes

C'est simple, utilisez simplement la <center> :)


0 commentaires