0

Olá.

Tenho um form login, só que estou precisando alinhar uma logo ao centro desse form, de forma que esse alinhamento fique responsivo.

Sei que tem algumas formas, mas qual é a melhor forma de fazer esse alinhamento?

Atualmente esse é meu código, ja com a imagem no local e tal.

<link rel="stylesheet" href="theme.css" type="text/css">
<div class="py-5" >
    <div class="container">            
        <div class="row">    
            <div class="p-5 col-lg-6">
                <img src="~/Content/img/br_negativa.png" style="height:100px" alt="SPARTAN"  />                 
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })                          
                    </div>
                </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })                        
                    </div>                
            </div>
         </div>
     </div>
</div>
2
  • para comunidade ajudar você, primeiro você tem que ajudar a comunidade, forneça mais informação na pergunta, exemplo, edite a pergunta e adicione o conteúdo que esta dentro do theme.css, fica impossível te ajudar sem saber como esta a formatação das class que já existe no form.
    – Vitor Hugo
    Commented 19/11/2018 às 10:08
  • @VitorHugo na verdade ele usou as Tags [twitter-bootstrap] e [bootstrap-4] isso é o suficiente para saber do que se trata... Até pq ele não está usando nenhuma tag além das originais do Bootstrap e colocou o código HTML que ele está usando... Ao meu ver a pergunta está dentro dos critérios para ser respondida. O que renderiza no @Html. não é necessário saber para poder responder...
    – hugocsl
    Commented 19/11/2018 às 10:41

1 Resposta 1

1

Eu achei um pouco estranha a estrutura feita no HTML com o Grid do Bootstrap. Mas falando a grosso modo o que vc precisa para alinha a imagem é criar uma nova coluna, que ocupe 100% da largura, que no caso sera a col-12 e colocar dentro dela a imagem. Nessa col-12 vc tb usa a classe text-center para alinha a imagem no centro da tela.

Veja como fica o resultado

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

    <div class="p-5">
        <div class="container">
            <div class="row p-5">
                <div class="col-12 text-center">
                    <img src="https://placecage.com/100/100" style="height:100px" alt="SPARTAN" />
                </div>
                <div class="p-5 col-lg-6">
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                </div>
            </div>
        </div>
    </div>

1
  • eu acabei comendo os outros campos do html que são gerados pelo RAZOR do .NET, só quis deixa as classes do bootstrap pra facilitar a visualização. Ta meio sem sentido mesmo, vou editar.
    – Jhensen
    Commented 19/11/2018 às 11:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .