Как подровнять столбец из картинок CSS?

Question

Мне надо выровнять элементы вот так:

А у меня получается вот так:

Вот ссылка на гитхаб репозиторий https://github.com/Nazarchonok/nazarchonok.github.io/tree/master/src

Answer 1

Применил SVG вставил их как use выровнял блоки обычным margin

Дэмо: https://codepen.io/topicstarter/pen/jOPqNGp

.items {
  width: 100px;
  margin: auto;
  background: #000;
  padding: 30px 0;
  background: url(https://oboi.ws/wallpapers/25_959_oboi_pole_nochju_1920x1200.jpg);
  background-size: cover;
}

.items div {
  width: 50px;
  margin: 30px auto;
}

<svg width="0" height="0">
<g id="price" fill="#fff">
<path d="M437.02,74.98C388.668,26.628,324.38,0,256,0S123.332,26.628,74.98,74.98C26.629,123.332,0,187.62,0,256
			s26.629,132.668,74.98,181.02C123.332,485.372,187.62,512,256,512s132.668-26.628,181.02-74.98
			C485.371,388.668,512,324.38,512,256S485.371,123.332,437.02,74.98z M256,482C131.383,482,30,380.617,30,256S131.383,30,256,30
			s226,101.383,226,226S380.617,482,256,482z"/>
		<path d="M272.067,241h-32.134c-18.307,0-33.2-14.893-33.2-33.199c0-18.307,14.894-33.2,33.2-33.2H304.2c8.284,0,15-6.716,15-15
			s-6.716-15-15-15H271v-33.2c0-8.284-6.716-15-15-15s-15,6.716-15,15v33.2h-1.066c-34.849,0-63.2,28.352-63.2,63.2
			c0,34.848,28.352,63.199,63.2,63.199h32.134c18.306,0,33.199,14.894,33.199,33.2c0,18.306-14.893,33.2-33.199,33.2h-64.267
			c-8.284,0-15,6.716-15,15s6.716,15,15,15H241v33.201c0,8.284,6.716,15,15,15s15-6.716,15-15V367.4h1.067
			c34.848,0,63.199-28.352,63.199-63.2S306.915,241,272.067,241z"/>
	</g>
  <g id="clock" fill="#fff">
<path d="m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"/><path d="m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"/>
  </g>
  <g id="walk" fill="none" stroke="#fff" stroke-width="20">
<path d="M250.667,85.333c23.467,0,42.667-19.2,42.667-42.667C293.333,19.2,274.133,0,250.667,0S208,19.2,208,42.667
		S227.2,85.333,250.667,85.333z"/>
	<path d="M368,245.333v-42.667c-39.467,0-73.6-21.333-92.8-52.267l-20.267-34.133C247.467,103.467,233.6,96,218.667,96
		c-5.333,0-10.667,1.067-16,3.2l-112,45.867v100.267h42.667v-71.467l37.333-16L112,458.667h44.8L194.133,288L240,330.667v128
		h42.667V297.6l-43.733-43.733l12.8-64C279.467,224,321.067,245.333,368,245.333z"/>
</g>
</svg>
<div class="items">
  <div>
    <svg viewBox="0 0 512 512" width="50">
      <use xlink:href="#price"/>
    </svg>
  </div>
  <div>
    <svg viewBox="0 0 443 443" width="50">
      <use xlink:href="#clock"/>
    </svg>
  </div>
  <div>
    <svg viewBox="0 0 470 480" width="50">
      <use xlink:href="#walk" y="10"/>
    </svg>
  </div>
</div>

БЛОГ НА HUSL

Как подровнять столбец из картинок CSS?

Ответы (1 шт):