How to align the shape in the center of bootstrap 3?

Question

There is a picture on which you need to impose a form and center it.

`<div class="container-fluid"> <div class="row"> <div class="img-wrap"> <img class="img-responsive" style="margin: 0;padding: 0px;" src="img/bgform.jpg"> <img src="img/sale.jpg" class="img-responsive img-thumbnail" id="sale"> <form id="form" role="form" action="" method="post" class="center-block"> <div class="row"> <div class="form-group col-xs-3 text-center"> <div class="control-group required"> <div class="controls" style="margin-bottom: 10px"> <input class="form-control" placeholder="Введите Ваше имя" id="name" maxlength="30" name="username" type="text" /> </div> <div class="controls" style="margin-bottom: 10px"> <input class="form-control" placeholder="Введите Ваш телефон" id="phone" maxlength="30" name="username" type="text" /> </div> <input class="btn btn-success" type="submit" class="button" value="Отправить"/> </div> </div> </div> </form> </div> </div>`

CSS:

 .img-wrap { position: relative; color:#ffc000;[![Форма в углу нужно центрировать её по вертикали и горизонтали][1]][1] } .img-wrap h1 { position: absolute; top: 0; left: 1%; bottom: 0; width: 100%; } .img-wrap #sale { position: absolute; top: 10%; left: 1%; bottom: 0; width: 400px; height: auto; } .img-wrap #form { position: absolute; top: 0; left: 1%; bottom: 0; width: 100%; }

Thank you in advance!

soledar10 soledar10 22.4k five 21 51 · Accepted Answer · 2018-09-16T18:52:03

Example

 #form { max-width: 250px; padding-left: 15px; padding-right: 15px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <form id="form" role="form" action="" method="post" class="center-block"> <div class="row"> <div class="form-group text-center"> <div class="control-group required"> <div class="controls" style="margin-bottom: 10px"> <input class="form-control" placeholder="Введите Ваше имя" id="name" maxlength="30" name="username" type="text" /> </div> <div class="controls" style="margin-bottom: 10px"> <input class="form-control" placeholder="Введите Ваш телефон" id="phone" maxlength="30" name="username" type="text" /> </div> <input class="btn btn-success" type="submit" class="button" value="Отправить" /> </div> </div> </div> </form>

So everything is correct, but when setting position: absolute, the form moves to the left.
Position: absolute is required to be placed on top of the image.

How to align the shape in the center of bootstrap 3?

1 answer 1

More articles: