0

Есть на картинка на которую нужно наложить форму и выровнять по центру. Форма слева в углу нужно выровнять её по горизонтали и вертикали

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

СSS:

.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%;
}

Заранее спасибо!

1 ответ 1

1

Пример

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

7
  • Мне нужно именно поверх картинки. Так всё правильно но при задании position:absolute форма сдвигается влево. Position:absolute необходимо для помещения поверх картинки. Что можно сделать в этом случае?
    – Oleksandr
    16 сен 2018 в 19:07
  • @Alexandr - фоновое изображение задайте для img-wrap
    – soledar10
    16 сен 2018 в 19:09
  • это изображение будет адаптивным?
    – Oleksandr
    16 сен 2018 в 19:11
  • @Alexandr - да, добавив background-size: cover
    – soledar10
    16 сен 2018 в 19:12
  • изображение обрезалось по высоте. Как исправить подскажите , пожалуйста
    – Oleksandr
    16 сен 2018 в 19:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.