html - aligning elements in their containers and the containers on the line -
i've got several elements trying group , center them on page so:
| | username: | ________________ | img 1 password: | ________________ | img 2 login | | |
i don't want username , password centered, still want @ left side of input boxes.
right looks this:
| username im|g 2 | _______________ | img 1 _______________ pass|word: | login | | |
i've got img 1, login button , vertical line in spot form on place. i've tried playing around lot of different things rest of login form , img 2 in right spot stuck. here basic layout of html file:
<div id="center-wrapper"> <div id="img1"> <img src="img1.png" /> </div> <br> <div id="img2"> <img src="img2.png" /> </div> <div id="line"></div> <form id="form-wrapper" action="/login/" method="post" style="width:40%;"> {% csrf_token %} {% field in form %} <br> {% if field.errors %} <div class="form-group has-error"> <label class="col-sm-2 control-label" for="id_{{ field.name }}"> {{ field.label }}</label> <div class="col-sm-10"> {{ field|attr:"class:form-control" }} <span class="help-block"> {% error in field.errors %}{{ error }}{% endfor %} </span> </div> </div> {% else %} <div class="form-group"> <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label> <div class="col-sm-10"> {{ field|attr:"class:form-control" }} {% if field.help_text %} <p class="help-block"><small>{{ field.help_text }}</small></p> {% endif %} </div> </div> {% endif %} <br> {% endfor %} <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <br> <button type="submit" class="btn btn-primary" value="log in">{% trans "log in" %}</button><br> <br>don't have account? <a href="/signup/">sign up</a> </div> </div> </form> </div>
my button inside form not sure why 1 being centered , rest of form not. also, <br>
not putting img 2 under img 1. css this:
#center-wrapper { text-align: center; margin: auto; width: 60%; height: 100%; } #form-wrapper { width: 50%; } #img1 { height: 220px; width: 274px; background: none; z-index: 30; float: right; position: absolute; margin-top: 0; } #img2 { height: 85px; width: 274px; background: none; z-index: 30; float: right; position: absolute; margin-bottom: 0; } #line { height: 305px; width: 2px; background-color: #8a8a8a; top: 200px; left: 50%; z-index: 30; position: absolute; }
i don't think question hard, have been struggling on getting format right long , want suggestions! using django forms, pretty tricky format (formatting them widget-tweaks), don't think should matter moving position around.
please avoid use of absolute
positions kind of layouts break view @ point.
i suggest use of other css methods. check snippet examples if have more questions can ask:
display - table
* { margin: 0; padding: 0; box-sizing: border-box } html, body { height: 100%; } #center-wrapper { height: 100%; width: 100%; display: table; } #center-wrapper > div { width: 50%; display: table-cell; vertical-align: middle; text-align: center; } #center-wrapper > div:first-child { border-right: 2px solid red; } #form-wrapper { width: 70%; display: inline-block; } label, input { width: 100%; text-align: left; display: block; }
<div id="center-wrapper"> <div> <form id="form-wrapper"> <label>user</label> <input type="text"> <label>pass</label> <input type="text"> <button type="submit" value="log in">log in</button> </form> </div> <div> <img src="http://placehold.it/200" /> <img src="http://placehold.it/200" /> </div> </div>
inline-block
* { margin: 0; padding: 0; box-sizing: border-box } html, body { height: 100%; } #center-wrapper { height: 100%; width: 100%; } #center-wrapper > div { width: 48%; display: inline-block; vertical-align: middle; text-align: center; } #center-wrapper > div.line { width:2%; height:100%; background:purple; } #form-wrapper { width: 70%; display: inline-block; } label, input { width: 100%; text-align: left; display: block; }
<div id="center-wrapper"> <div> <form id="form-wrapper"> <label>user</label> <input type="text"> <label>pass</label> <input type="text"> <button type="submit" value="log in">log in</button> </form> </div> <div class="line"></div> <div> <img src="http://placehold.it/200" /> <img src="http://placehold.it/200" /> </div> </div>
note : other methods flex work also, here give idea
Comments
Post a Comment