Button centering on a div does not work

Question

Button centering on a div does not work

Navigation

#1 by (1 votes)

0

I've created a div containing several buttons, and I set the align = "center" attribute to the same html in two of those buttons (the second button line). But it was the same as nothing, they continue to appear aligned to the left of the div. What can it 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 menu div css:

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

The button style css:

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;
    }

html5 css

asked by anonymous 22.04.2018 / 16:08

1 answer

Drag n Drop - Android How do I get a procedure return to see if it has any affected row?

score 1 · Accepted Answer

Hello, some thoughts about the way you're trying to apply styles to your layout:

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

2) an element should not be "aligned", unless you change the position , margin , etc of it, it is simpler to put inside a container , a% for example, that it does align the elements inside it (as in the suggestion below)

3) There are several ways to align an element, I suggest you read this W3C link: link

Now a suggestion for your problem: put the buttons you want to align on a div , and put this div the center alignment, because everything inside will be aligned. I kept your styles, it only includes 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>