Centering buttons on a div does not work

Asked

Viewed 164 times

0

I created a div containing several buttons, and I set in two of these buttons (those of the second row of buttons) the attribute align = "center", html itself. But it was the same thing as nothing, they keep appearing aligned to the left of the div. What can be ?

    <!DOCTYPE html>
    <html>
    <head><title> Banco Online </title>

    <link rel="StyleSheet"
    href="EstiloBotao.css"
    type="text/css" />

    <link rel="StyleSheet"
    href="EstiloMenu.css"
    type="text/css" />

    </head>
    <body>

        <div class="menu" id="menu1">
            <button class="botao" onClick="mudaMenu('menu1', 'menu2')">Iniciar</button>
        </div>

        <div class="menu" id="menu2" style="display:none">
            <button class="botao"> Saldo </button>
            <button class="botao" > Extratos </button>
            <button class="botao" > Saques </button>
            <br>   <!-- ESSES DOIS BOTÕES ABAIXO NÃO FICAM CENTRALIZADOS NA 
                     DIV-->
            <br>
            <button class="botao" align="center" > Depósitos </button>
            <button class="botao" align="center"> Transferências </button>
        </div>
...... resto do código

The css of the menu div:

body, html {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
        position:relative;
      }
      .menu{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }

The style css of the button:

botao{
        background:#6E6E6E;
        color:gold;
        font-size:22px;
        font-family:Verdana;
        font-weight:bold;
        height:100px; width:200px;
        border-color:#D8D8D8;
        border-radius:20px;
        border-width:6px;
    }
css html5

1 answer

1


Hello, some considerations about the way you are trying to apply styles to your layout:

1) align="center" is obsolete in HTML5;

2) an element should not "align" unless you change the position, margin, etc of it, it is simpler to put inside a container, one div for example, that this yes align the elements within it (as in the suggestion below)

3) there are several ways to align an element, I suggest you read this W3C link: https://www.w3.org/Style/Examples/007/center.en.html

Now a hint for your problem: put the buttons you want to align on one div, and put on this div centered alignment, because everything inside will be aligned. I kept your styles, only include a border in the menu to highlight the alignment.

body, html {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
        position:relative;
      }
      .menu{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        border: solid 1px;
        width: 300px;
      }
      botao{
        background:#6E6E6E;
        color:gold;
        font-size:22px;
        font-family:Verdana;
        font-weight:bold;
        height:100px; width:200px;
        border-color:#D8D8D8;
        border-radius:20px;
        border-width:6px;
    }
    .centralizar {
      width: 100%; 
      text-align: center
    }
<div class="menu" id="menu2">
    <button class="botao"> Saldo </button>
    <button class="botao" > Extratos </button>
    <button class="botao" > Saques </button>
    <br>
    <br>
    <div class="centralizar">
      <button class="botao" > Depósitos </button>
      <button class="botao"> Transferências </button>
    </div>     
</div>

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.