Как отцентровать span по вертикали?

182
05 февраля 2022, 18:00

body{ 
	margin: 0; 
	padding: 0; 
	background: #f5f5f5; 
	font-family: 'Roboto', sans-serif; 
} 
header{ 
	text-align: center; 
	font-weight: 100; 
	font-size: 100px; 
	font-family: 'Roboto', sans-serif; 
	color: #ecdbdb; 
} 
.body-main{ 
	height: 67vmin; 
	width: 90vmin; 
	margin: auto; 
} 
.input{ 
	height: 10vmin; 
	background: #ffffff; 
	border: 1px solid #e6e6e6; 
	width: auto; 
} 
input[name="input_name"]::-webkit-input-placeholder { 
    color: #e0e0e0; 
    font-weight: 300; 
    font-size: 18px; 
    font-family: 'Roboto', sans-serif; 
    font-style: italic; 
    height: 5em; 
} 
ul{ 
	margin: 0; 
	padding: 0; 
} 
li{ 
	height: 10vmin; 
	list-style-type: none; 
	border-bottom: 1px solid #e6e6e6; 
	border-left: 1px solid #e6e6e6; 
	border-right: 1px solid #e6e6e6; 
    background: #ffffff; 
    color: #666666; 
    padding: 0.18em 0; 
    line-height: 3vmin; 
    padding: 1% 0; 
} 
.check__box{ 
	position: absolute; 
	background-image: url('empty.svg');  
	width: 2.25em; 
	height: 2.25em; 
	margin-left: 0em; 
	line-height: 0.8em; 
	text-decoration: line-through; 
} 
.namet{ 
	padding-left: 3em; 
	margin-top: 0.15em; 
} 
.check__input:checked + .check__box{ 
	background-image: url('compl.svg');  
} 
.delete{ 
	position: relative; 
	background: transparent; 
	background-image: url('close.png');  
	width: 1.5em; 
	height: 1.5em; 
	background-repeat : no-repeat; 
	border:none; 
	margin-top: -1.3vw; 
	margin-right: 1vw; 
	margin-bottom: auto; 
	display: flex; 
	margin-left: auto; 
	display:none; 
} 
li:hover{ 
	background: #fafafa; 
	cursor: pointer; 
} 
li:hover .delete{ 
    display:block; 
} 
.empty{ 
	height: 10vmin; 
	list-style-type: none; 
	border-left: 1px solid #e6e6e6; 
	border-right: 1px solid #e6e6e6; 
    background: #ffffff; 
    color: #666666; 
    border-bottom: 1px solid #e6e6e6; 
} 
.button__input{ 
	float: left; 
	background: transparent; 
	background-image: url('select-all.png');  
	width: 24px; 
	height: 12px; 
	border: none; 
	margin: 0.5vw; 
	/*margin-top: 1.5vw;*/ 
} 
.input__name{ 
	/*margin-top: 1.5vw;*/ 
	width: 92%; 
	margin-top: 0.3vw; 
	border: none; 
} 
.input{ 
	clear:both;  
	text-align:left; 
} 
input[type=checkbox]:checked  + span + .namet{ 
	text-decoration: line-through; 
	color: #d8d8d8; 
} 
.container{ 
	white-space:nowrap; 
	background: #ffffff; 
	color: #666666; 
	font-size: 15px; 
	margin-bottom: auto; 
	margin-top: auto; 
	padding: 0.15vw 
} 
input[type="radio"]{ 
	display: none; 
} 
.button_1{ 
	padding-top: 0.3vw; 
	padding-bottom: 0.3vw; 
	padding-left: 1vw; 
	padding-right: 1vw; 
} 
.button_2{ 
	padding-top: 0.3vw; 
	padding-bottom: 0.3vw; 
	padding-left: 1vw; 
	padding-right: 1vw; 
} 
.button_3{ 
	padding-top: 0.3vw; 
	padding-bottom: 0.3vw; 
	padding-left: 1vw; 
	padding-right: 1vw; 
} 
.container{ 
	display: flex; 
    align-items: center;  
	border-left: 1px solid #e6e6e6; 
	border-right: 1px solid #e6e6e6; 
	padding: 13px; 
} 
.clear{ 
	margin-left: auto; 
    margin-right: 0; 
    padding-right: 0.7vw; 
} 
.items-left{ 
	margin-left: 0; 
    margin-right: auto; 
    padding-left: 0.7vw; 
} 
.buttons input:checked + span { 
	border: 1px solid #ececec; 
	padding: 5px; 
	border-radius: 4px; 
} 
.down_1{ 
	height: 1.9vw; 
	width: 89vmin; 
	margin: auto; 
} 
.down_2{ 
	background: #fff; 
	height: 0.3vw; 
	width: 88vmin; 
	margin: auto; 
	z-index: -1; 
	position: relative; 
} 
.down_3{ 
	background: #fff; 
	height: 0.4vw; 
	width: 87vmin; 
	margin: auto; 
	z-index: -2; 
	position: relative; 
} 
.el{ 
	padding: 1.5em 0; 
} 
.check__box { 
  transform: translate(0, -50%) 
}
<!DOCTYPE html> 
<html> 
<head> 
	<title>Todos</title> 
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet"> 
	<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
	<div class="main"> 
 
 
 
		<header> 
			todos 
		</header> 
 
 
 
		<div class="body-main"> 
 
			<div class="input"> 
				<div class="el"> 
					<button class="button__input"></button> 
					<input type="text" name="input_name" class="input__name" placeholder="What needs to be done?"> 
				</div> 
				 
			</div> 
 
			<ul> 
				<label class="check option"> 
					<li> 
						<div class="html"> 
 
								<input class="check__input" type="checkbox"> 
 
								<span class="check__box"></span> 
 
								<div class="namet"> 
									HTML 
								</div> 
							 
								<div class="my"> 
									<button type="button" class="delete"></button> 
								</div> 
 
						</div>	 
					</li> 
				</label> 
				 
 
				<label class="check option"> 
					<li> 
						<input class="check__input" type="checkbox" name="" checked=""> 
 
						<span class="check__box"></span> 
 
						<div class="namet"> 
							CSS 
						</div> 
 
						<div class="my"> 
							<button type="button" class="delete"></button> 
						</div> 
 
					</li> 
				</label> 
				 
 
				<label class="check option"> 
					<li> 
						<input class="check__input" type="checkbox" name=""> 
 
						<span class="check__box"></span> 
 
						<div class="namet"> 
							JS 
						</div> 
 
						<div class="my"> 
							<button type="button" class="delete"></button> 
						</div> 
 
					</li> 
				</label> 
				 
 
				<label class="check option"> 
					<li> 
						<input class="check__input" type="checkbox" name=""> 
 
						<span class="check__box"></span> 
 
						<div class="namet"> 
							JS tools 
						</div> 
 
						<div class="my"> 
							<button type="button" class="delete"></button> 
						</div> 
 
					</li> 
				</label> 
				 
 
				<div class="empty"> 
				</div> 
			</ul> 
 
 
			<footer> 
				<div class="container"> 
					 
				<div class="items-left"> 
					3 items left 
				</div> 
 
 
 
				 <div class="buttons"> 
					<label class="button_1"> 
								<input type="radio" name="button_footer" checked="checked"> 
								<span class="button_footer">All</span> 
							</label> 
							<label class="button_2"> 
								<input type="radio" name="button_footer"> 
								<span class="button_footer">Active</span> 
							</label> 
							<label class="button_3"> 
								<input type="radio" name="button_footer"> 
								<span class="button_footer">Completed</span> 
							</label> 
				</div> 
 
 
 
				<div class="clear"> 
					clear completed 
				</div> 
 
				</div> 
 
			</footer> 
		</div> 
 
		<div class="down_1"> 
		</div> 
 
		<div class="down_2"> 
		</div> 
 
		<div class="down_3"> 
		</div> 
 
 
 
 
 
		 
 
 
 
 
	</div> 
</body> 
</html>

В span лежит svg иконка. Я делал margin-top отступы через vw. Но на разных разрешениях все выглядит по-разному. Также я гуглил как центровать div. Заворачивал это в div, но все равно не работало. https://danila-barsik1337.github.io/hw.github.io/

Answer 1

Вам надо изучить,например,FlexBox если вам нужна адаптивная верстка, вот хорошая статья на эту тему.

И также вам не мешало бы почитать об HTML разметке . Ничего не зависит от того в какой тег вы что оборачиваете, но оборачивать в <li> что-то кроме текста - неправильно.Этот тег является элементом нумерованного списка <ol> или не нумерованного <ul>.

Что на счет центрирования вы могли бы это сделать так c помощью flexbox:

body { 
  display: flex; 
  position: absolute; 
  height: 100%; 
  width: 100%; 
  justify-content: center; 
  align-items: center; 
} 
 
.html { 
  background: lightcoral; 
}
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8"> 
 
</head> 
 
<body> 
  <div class="html"> 
 
    <input class="check__input" type="checkbox"> 
 
    <span class="check__box">span</span> 
 
    <div class="namet"> 
      HTML 
    </div> 
    <button type="button" class="delete"></button> 
  </div> 
</body> 
 
</html>

В вашем примере надо было использовать свойства top right left с единицами измерения относительно окна браузера в % либо vw vh :

.html { 
  background: tomato; 
  position: absolute; 
  top: 50%; 
  transform: translate(0, -50%) 
}
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8"> 
 
</head> 
 
<body> 
  <div class="html"> 
 
    <input class="check__input" type="checkbox"> 
 
    <span class="check__box">span</span> 
 
    <div class="namet"> 
      HTML 
    </div> 
    <button type="button" class="delete"></button> 
  </div> 
</body> 
 
</html>

А также мне совсем не понятно чего вы хотите добиться, приводите более конкретные примеры, например, изображения.

P.S Вставляйте код в вопрос с помощью этой кнопки:

так всем будет удобнее...

READ ALSO
Как принимать платежи с карт, без посредников и без организации юридического лица?
HTML

Как принимать платежи с карт, без посредников и без организации юридического лица?

Есть некий портал который не подходит модерацию для большинства платформ эквайринга(онлайн платежей)

 77
Как сделать чтобы на iOS работал :active у элементов?
HTML

Как сделать чтобы на iOS работал :active у элементов?

Как сделать чтобы на мобилах (iOS, Safari) работал :active у элементов? Когда на компе кликаешь по элементу, становится :active на секунду, меняется цвет...

 86
Отобразить при наведении скрытый текст
HTML

Отобразить при наведении скрытый текст

Подскажите, пожалуйста, имеется кодПо нажатию на кнопку копируется текст, как сделать, чтобы при наведении на кнопку показывался скрытый...

 106
Изменение размера шрифта при ресайзе
HTML

Изменение размера шрифта при ресайзе

Есть вот такой макет

 117