Home / Questions / 414014
Accepted
Jonas
Asked: 2021-12-13 03:26:39 +0800 CST 2021-12-13 03:26:39 +0800 CST

CSS and HTML how to center form boxes

  • 772

Hello good, I have a question, I don't know how to align the text boxes (input) and the labels so that they are well centered, the fact is that I also have a textarea, to make the typical form, but it won't let me. I leave my code.

This would be the form

.formulario {
    
    display: block;
    padding: 10pxx;
}
<div class="formulario">
    <form action="">
        <div>
            <label for="nombre">Nombre</label>
            <input id="nombre" type="text">
        </div>
<div>
    <label for="asunto">Asunto</label>
    <input id="asunto" type="text">
</div>

<div>
    <label for="correo">Correo:</label>
    <input id="correo" type="email">
</div>

<div>
    <label for="nensaje">Mensaje</label>
    <textarea name="" id="mensaje" cols="30" rows="10"></textarea>
</div>

html

2 Answers

  1. I assume that by "center" you mean this.

    You need to add the CSS to the other elements. Here I have made a basic fix:

    .formulario {
    
    display: block;
    padding: 10pxx;
    text-align:center;
    border:1px solid black;
    margin:0 auto;
}

.formulario div {
width:40%;
margin: 40px auto;
text-align:left;
}

#message-label {
display:inline-block;
width:100%;
margin-bottom:10px;
text-align:left;
}
    <div class="formulario">
    <form action="">
        <div>
            <label for="nombre">Nombre</label>
            <input id="nombre" type="text">
        </div>
        <div>
            <label for="asunto">Asunto</label>
            <input id="asunto" type="text">
        </div>
        <div>
            <label for="correo">Correo:</label>
            <input id="correo" type="email">
        </div>

        <div>
            <label for="mensaje" id="message-label">Mensaje</label>
            <textarea name="" id="mensaje" cols="30" rows="10"> </textarea>
        </div>
    </form>
</div>

    • 1
  2. Best Answer

    If what you want is to align the boxes, it happens that the label labelis of type inline, that is, its width will be the same as that occupied by the text and the form boxes will be placed right next to it.

    A simple solution would be to set the label labelto type inline-blockand give it a fixed width ( width):

    .formulario {
    
    display: block;
    padding: 10pxx;
}

label {
    display: inline-block;
    width: 80px;
}
    <div class="formulario">
    <form action="">
        <div>
            <label for="nombre">Nombre</label>
            <input id="nombre" type="text">
        </div>
<div>
    <label for="asunto">Asunto</label>
    <input id="asunto" type="text">
</div>

<div>
    <label for="correo">Correo:</label>
    <input id="correo" type="email">
</div>

<div>
    <label for="nensaje">Mensaje</label>
    <textarea name="" id="mensaje" cols="30" rows="10"></textarea>
</div>

    • 1