Как выравнивать элементы в html?

228
19 марта 2018, 23:52

Всем привет, только учусь писать странички и столкнулся с проблемой:
1. Как сделать так , чтобы ячейки формы выровнены вместе с кнопкой? Как это делать вообще для элементов?
2. Как сделать чтобы картинка была ровно посередине кнопки?
В данный момент это выглядит как-то так:

Фрагмент кода:

<form> 
  <p><input type="button" value="Добавить процесс теплообмена"></p> 
  <p> 
    <input name="c" placeholder="c"> 
    <input name="m" placeholder="m"> 
    <input name="t" placeholder="t"> 
    <input name="t0" placeholder="t0"> 
    <button>  
				<img src="Pictures\cogwheel-112226.png">  
			</button> 
  </p> 
 
  <p><input type="button" value="Добавить изменение агрегатного состояния"></p> 
 
  <p> 
    <input name="Lamb" placeholder="λ"> 
    <input name="m" placeholder="m"> 
    <button style="width:20px;height:20px">  
				<img src="Pictures\cogwheel-112226.png">  
			</button> 
  </p> 
 
  <p><input type="submit" value="Подтвердить"></p> 
</form>

Answer 1

  1. Самый простой вариант вертикального выравнивания. Можно отцентрировать элементы по вертикали относительно друг друга, поставив им всем значение vertical-align: middle;

    p * { vertical-align: middle; }

Насчет вариантов вертикального выравнивания есть целая статья https://habrahabr.ru/company/netcracker/blog/277433/

Дальше как выровнять картинку на кнопке если указать фиксированные размеры.

  1. Если задать фиксированные размеры кнопке, то у неё внутри ещё есть граница и отступы и картинка вставится после них (к примеру у меня в браузере 2 пикселя границы и 6px отступы слева и справа). Поэтому проще всего позиционировать картинку относительно кнопки с помощью position:absolute. Если кнопка гораздо больше картинки или у нее не заданы размеры, то картинка итак спозиционируется по центру. Еще можно уменьшить внутренние отступы кнопки указав padding:0.

  2. Так как позиционирование относительно кнопки работает не от угла кнопки, а от угла границы, то стоит сделать обертку вокруг кнопки <span class="wrap">...</span> и позиционировать относительно нее. Теперь будет неважно какие размеры границы задал браузер кнопке.

p * { 
  vertical-align: middle; 
} 
 
.mybutton { 
  position: relative; 
  width: 20px; 
  height: 20px; 
} 
 
.mybutton svg { 
  position: absolute; 
  top: -2px; 
  left: -2px; 
} 
 
.wrap { 
  position: relative; 
} 
 
.wrap button { 
  width: 20px; 
  height: 20px; 
} 
 
.wrap button svg { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
}
<p> 
  <input name="Lamb" placeholder="λ"> 
  <button style="padding:2px;"> 
    <svg width="20" height="20" viewBox="0 0 24 24"> 
      <path d="M20 13.44v-2.88l-1.8-.3c-.1-.397-.3-.794-.6-1.39l1.1-1.49-2.1-2.088-1.5 1.093c-.5-.298-1-.497-1.4-.596L13.5 4h-2.9l-.3 1.79c-.5.098-.9.297-1.4.595L7.4 5.292 5.3 7.38l1 1.49c-.3.496-.4.894-.6 1.39l-1.7.2v2.882l1.8.298c.1.497.3.894.6 1.39l-1 1.492 2.1 2.087 1.5-1c.4.2.9.395 1.4.594l.3 1.79h3l.3-1.79c.5-.1.9-.298 1.4-.596l1.5 1.092 2.1-2.08-1.1-1.49c.3-.496.5-.993.6-1.39l1.5-.3zm-8 1.492c-1.7 0-3-1.292-3-2.982 0-1.69 1.3-2.98 3-2.98s3 1.29 3 2.98-1.3 2.982-3 2.982z"/> 
    </svg> 
  </button> 
</p> 
<p> 
  <input name="Lamb" placeholder="λ" style="vertical-align:middle;"> 
  <button class="mybutton"> 
    <svg width="20" height="20" viewBox="0 0 24 24"> 
      <path d="M20 13.44v-2.88l-1.8-.3c-.1-.397-.3-.794-.6-1.39l1.1-1.49-2.1-2.088-1.5 1.093c-.5-.298-1-.497-1.4-.596L13.5 4h-2.9l-.3 1.79c-.5.098-.9.297-1.4.595L7.4 5.292 5.3 7.38l1 1.49c-.3.496-.4.894-.6 1.39l-1.7.2v2.882l1.8.298c.1.497.3.894.6 1.39l-1 1.492 2.1 2.087 1.5-1c.4.2.9.395 1.4.594l.3 1.79h3l.3-1.79c.5-.1.9-.298 1.4-.596l1.5 1.092 2.1-2.08-1.1-1.49c.3-.496.5-.993.6-1.39l1.5-.3zm-8 1.492c-1.7 0-3-1.292-3-2.982 0-1.69 1.3-2.98 3-2.98s3 1.29 3 2.98-1.3 2.982-3 2.982z"/> 
    </svg> 
  </button> 
</p> 
<p> 
  <input name="Lamb" placeholder="λ" style="vertical-align:middle;"> 
  <span class="wrap"> 
    <button> 
      <svg width="20" height="20" viewBox="0 0 24 24"> 
        <path d="M20 13.44v-2.88l-1.8-.3c-.1-.397-.3-.794-.6-1.39l1.1-1.49-2.1-2.088-1.5 1.093c-.5-.298-1-.497-1.4-.596L13.5 4h-2.9l-.3 1.79c-.5.098-.9.297-1.4.595L7.4 5.292 5.3 7.38l1 1.49c-.3.496-.4.894-.6 1.39l-1.7.2v2.882l1.8.298c.1.497.3.894.6 1.39l-1 1.492 2.1 2.087 1.5-1c.4.2.9.395 1.4.594l.3 1.79h3l.3-1.79c.5-.1.9-.298 1.4-.596l1.5 1.092 2.1-2.08-1.1-1.49c.3-.496.5-.993.6-1.39l1.5-.3zm-8 1.492c-1.7 0-3-1.292-3-2.982 0-1.69 1.3-2.98 3-2.98s3 1.29 3 2.98-1.3 2.982-3 2.982z"/> 
      </svg> 
    </button> 
  </span> 
</p>

Answer 2

Вопрос конечно не полон. Но если правильно понял - выравнивание можете сделать с помощью margin:0 0 0 0; padding:0 0 0 0; смотря что у Вас в разметке и стилях. Картинка по середине попробуйте так - для самой кнопки, где нужна картинка пишем css - background:url('путь до картинки')center no-repeat;

Answer 3

Скорее всего необходимо добавить vertical-align: top;

READ ALSO
Возможно ли обтекание flex-элемента?
CSS

Возможно ли обтекание flex-элемента?

Подскажите можно ли заставить остальные элементы flex-контейнера обтекать определенный элемент?

 247
Не работает слайдер bootstrap
CSS

Не работает слайдер bootstrap

Ребята, пыталась адаптировать слайдер bootstrap 4 на свой проект, но увы не работает вообщекогда подключаю библиотеку jQuery, то сбивает мне все...

 248
Отступы в блоке DIV
CSS

Отступы в блоке DIV

 267
Подсветка первых 5 мест в таблице
CSS

Подсветка первых 5 мест в таблице

Есть турнирная таблица(php выводит из mysql), из которой первые 5 команд выходят в play-off нужно сделать , чтобы первые 5 команд подcвечивались цветом(любым)

 221