How to align a checkbox component vertically in the center of the row

Question

How to align a checkbox component vertically in the center of the row

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

How do I align a check box vertically in the center of the row?

My project is asp.net core mvc.

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-group row">       
	<div class="col-md-10">
	<div class="col-md-3">
		<button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
	</div>
	<div class="col-md-12" id="div-contatos">
		<div class="row">
			<div class="col-md-4">
				<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-5">
				<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-3">
				<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>
		</div>
	</div>
</div>

html5 css asp.net-mvc

asked by anonymous 26.08.2018 / 22:01

2 answers

2

You can align with a padding-top .

Show "All Page" to see the result better. And if you find it necessary use the media query @media rules to treat the class and change this padding on small screens.

  /* classe para fazer o alinhamento */
    .valign {
      padding-top: 31px;
    }
  
  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;
    }

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


    <div class="form-group row">       
      <div class="col-md-10">
      <div class="col-md-3">
        <button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
      </div>
      <div class="col-md-12" id="div-contatos">
        <div class="row">
          <div class="col-md-4">
            <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-5">
            <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-3">
            <div class="checkbox-custom checkbox-default valign">
              <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked autocomplete="off" />
              <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>

26.08.2018 / 22:22

Determine size of circles in the legend of a GGPLOT2 chart Error in code sum beginning with 0; Problem inserting data into .txt file

score 2 · Accepted Answer

A quick way to do this would be to add a label with empty content after the <div class="col-md-3"> div, so it would fill the space above and your checkbox would be in the same proportion as the other fields.

See the following example:

<div class="form-group row">       
    <div class="col-md-10">
    <div class="col-md-3">
        <button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
    </div>
    <div class="col-md-12" id="div-contatos">
        <div class="row">
            <div class="col-md-4">
                <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-5">
                <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-3">
                <label name="PessoaContatoViewModel[0].ContatoPrincipal" 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>
        </div>
    </div>
</div>