How to align a button vertically on a Row

Asked

Viewed 176 times

0

I’m not able to vertically align a button inside a Row. I’ve tried to insert a label to force it down, but it doesn’t even move.

inserir a descrição da imagem aqui

  input[type="text"], select {
        /*font-size: 13px;*/
    }
    
    .selectClass {
        /*font-size: 13px;*/
    }
    
    label {
        /*font-size: 13px;*/
        /*color:#808080;*/
    }
    
    form label {
        font-weight:normal;
    }
    
    input[type=text] {
        width: 100%;
        /*padding: 12px 20px;*/
        /*margin: 8px 0;*/
        box-sizing: border-box;
        /*border: 1px solid #555;*/
        outline: none;
    }
    
    input[type=text]:focus {
        background-color: lightblue;
        color:black;
    }
    
    textarea:focus {
        background-color: lightblue;
        color: black;
    }
    
    /*.distanciaForms div[class^="col-"] {*/
        /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
    /*}*/
    
    .form-group {
        margin-bottom: 1% !important;
    }
<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-2">
                <button class="btn btn-primary form-control" id="btn-add-contato">Novo contato</button>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-contatos">
                <div class="row">
                        <div class="col-md-2">
                            <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
                            <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                        </div>
                        <div class="col-md-4">
                            <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
                            <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">&nbsp;</label>
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked
                                       autocomplete="off" />
                                <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label name="PessoaContatoViewModel[0].Detalhes" class="control-label">Detalhes</label>
                            <textarea name="PessoaContatoViewModel[0].Detalhes" class="form-control" />
                        </div>
                        <div class="col-md-1">
                            <label class="control-label">&nbsp;</label>
                            <button class="btn btn-danger btn-remover-contato">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

There is a way to align it vertically in an easy way?

css asp.net-mvc html5

  • Have you tried using the padding as I said in the other question you made of checkbos?

  • I tried... In the other post was a little misaligned checkbox, then it worked using a label breaking the content. With the button, did not work... Got out of alignment.

  • 1

    Man I gave a margin-top: 30px in the <button> and it was practically 100% aligned. But it may be that 30px does not exactly align with this model you are using, then you adjust this value to be right. Test there

  • It worked @hugocsl ... Before, I tested the padding on the Row block. I don’t think it worked for that! Thanks!

  • Nice that solved, but because you marked as accepted the answer that did not work?

  • Nice that solved, but because you marked as accepted the answer that did not work?

  • The answer worked, because the class aligns the element in the middle of the Row and not in relation to the other elements. What still needs to bring the boot a little lower, ie below the center. Just use top and position relative.

  • It worked with the other items. Only the button that didn’t work...

Show 3 more comments

1 answer

0


Since BS3 would already automatically align, you must be using BS4. Add the class align-items-center in the div-pai of the fields:

<div class="row align-items-center">

Since BS4 works with flexbox, it will align the elements in the center vertically. And it does not need the label emptiness that placed.

input[type="text"], select {
        /*font-size: 13px;*/
    }
    
    .selectClass {
        /*font-size: 13px;*/
    }
    
    label {
        /*font-size: 13px;*/
        /*color:#808080;*/
    }
    
    form label {
        font-weight:normal;
    }
    
    input[type=text] {
        width: 100%;
        /*padding: 12px 20px;*/
        /*margin: 8px 0;*/
        box-sizing: border-box;
        /*border: 1px solid #555;*/
        outline: none;
    }
    
    input[type=text]:focus {
        background-color: lightblue;
        color:black;
    }
    
    textarea:focus {
        background-color: lightblue;
        color: black;
    }
    
    /*.distanciaForms div[class^="col-"] {*/
        /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
    /*}*/
    
    .form-group {
        margin-bottom: 1% !important;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-2">
                <button class="btn btn-primary form-control" id="btn-add-contato">Novo contato</button>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-contatos">
                <div class="row align-items-center">
                        <div class="col-md-2">
                            <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
                            <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                        </div>
                        <div class="col-md-4">
                            <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
                            <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">&nbsp;</label>
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked autocomplete="off" />
                                <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label name="PessoaContatoViewModel[0].Detalhes" class="control-label">Detalhes</label>
                            <textarea name="PessoaContatoViewModel[0].Detalhes" class="form-control"></textarea>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-danger btn-remover-contato alinha-vert">
                                <span class="glyphicon glyphicon-trash">Lixo</span>
                            </button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

  • The button seems to be aligned more upwards in relation to the other objects.... It had to descend a little more... I set the checkbox using a break label, but the button is the only one that got higher...

  • The companion @hugocsl solved!! Thank you both for the strength!

  • Dude, the class I was talking about is gonna line up the button in the middle of Row. What you can do in addition is adjust the position a little lower with top: 10px; position: relative; Then you adjust the 10px until it is the way you want it to be.

Browser other questions tagged css asp.net-mvc html5

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