Align a logo in the center of the Form

Question

Align a logo in the center of the Form

Navigation

#1 by (1 votes)

0

Hello.

I have a form login, but I need to align a logo to the center of this form, so that alignment is responsive.

I know there are some ways, but what is the best way to do this alignment?

Currently this is my code, already with the image in place and such.

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

css twitter-bootstrap bootstrap-4

asked by anonymous 19.11.2018 / 04:57

1 answer

Float ignores margin Mongoose findone does not return values

score 1 · Accepted Answer

I found the structure made in HTML a bit strange with Bootstrap's Grid. But roughly speaking what you need to align the image is to create a new column, which occupies 100% of the width, which in this case will be col-12 and put the image inside. In this col-12 vc tb uses the text-center class to align the image in the center of the screen.

See what the result looks like

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