Search code examples
htmlcsslayoutcentering

How to center an inline <div>

I have a <div> with display: inline; property and I want to center it.

If I put margin: 0 auto works without display but I need the display not to take all the space like it's a block.

Html

<div id="login1">
<fieldset id="login2">
    <form method="post" action="register.php">
        <label>Nombre: </label>
        <input type="text" name="nombre" placeholder="Nombre de usuario"><br>
        <label>Password:</label>
        <input type="password" name="password" placeholder="Password"><br>
        <input type="submit" value="LogIn">
        <input type="reset" value="Reset">
    </form>
</fieldset>
</div>

Css

#login1 {
    display: inline-block;
    text-align: center;
}

I want to center all the <div>

Some idea?

Solution

  • Put text-align: center on the container (the element that contains your div).

    And your div shall be centered.