Помогите выровнять форму

Рейтинг: 1Ответов: 1Опубликовано: 25.04.2015

Как выровнять форму по центру так, чтобы при изменении ширины инпутов ничего не "съезжало". Пытался вручную подогнать ширину формы под размер контента и применить margin: auto, но тогда при изменении размера инпута или зума страницы все "едет".

form {
  width: 323px;
  margin: 0 auto;
}
canvas {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed gray;
}
<form>
  <input type="text"   id="left"/>
  <input type="submit" value=">>"/>
  <input type="text"   id="right"/>
</form>
<canvas width="40" height="200"></canvas>

JSFiddle: https://jsfiddle.net/4epmas8k/

Т.е. пытаюсь сделать так, чтобы submit-btn была над канвой и при изменении ширины инпутов ничего не съезжало.

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

https://jsfiddle.net/4epmas8k/3/

<div class="form-wrapper">
    <form>
        <input type="text"   id="left"/>
        <input type="submit" value=">>"/>
        <input type="text"   id="right"/>
    </form>
</div>

.form-wrapper { text-align: center; }
form { display: inline-block; }