Как вырвнять по центру?

Question

[Kris125]

Всем привет, продолжаю учиться верстать. Вот немного запуталась.
2 вопроса:

1) Как по центру относительно картинки выровнять?

2) Как по верхнему краю выровнять?

Answer 1

[Егор Живагин]

1 -

//Если у вас картинка - отдельный блок, и текст - отдельный блок, то дедовским способом
//Стили для блока с текстом:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//Если картинка - фон (background), то всему блоку:
display: flex;
justify-content: center;
align-items: center;

UPD:
2 - не очень понял... что именно выровнять и по краю чего?)

Comments

[Kris125]

1. Вот посмотрите пожалуйста, как код выглядит мой.

2. Имеется в виду хочу логотип и пункты меню, чтобы были выровнены по верхнему краю.

3. И если можно третий вопрос, смотрите take.ms/bEjsA по умолчанию не заданы для заголовка и параграфа маржины, но расстояние между ними есть почему-то. Это из-за line-height? Как в моем случае поступить, если хочу сделать между заголовком и параграфам расстояние например 30px?

[Егор Живагин]

Kris125: чтобы вставить свой код надо нажать три точки над набираемым текстом и выбрать язык или code )

3 - Да задайте line-height: 1 и margin-top и не мучайтесь. В данном случае это нормально

[Kris125]

Егор Живагин: а если бы заголовок был в две строки? тогда бы этот трюк не прошел бы :)

[Kris125]

<section class="hero">
		<div class="hero-content">
			<h1>Welcome Guys</h1>
			<p>Enjoy Our First Project Friend</p>
		</div>
	</section>

[Kris125]

Егор Живагин:

.hero-content h1,
.hero-content p {
	color: #fff;
}

.hero-content h1 {
	font-size: 60px;
}

.hero-content p {
	font-size: 15px;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

.hero {
	position: relative;
	margin: 50px 30px;
	background: url('../img/banner.jpg') 50%/cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	height: 600px;
}

.hero::before {
	content: '';
	position: absolute;
	background-color: rgba(33, 33, 33, 0.6);
	width: 100%;
	height: 100%;
}

[Егор Живагин]

Kris125: про две строки - да, естественно) Но line-height всё равно лучше зафиксировать вручную для кроссбраузерности, а от него подобрать margin

Вижу код. Я бы для .hero-content прописал то, что написал в ответе в первом варианте. Только с position: relative.
Если нужно выровнять только по вертикали -

top: 50%;
transform: translateY(-50%);

[Kris125]

Егор Живагин: так там и так ведь стоить position: relative take.ms/IYvqi получилось выровнять спасибо, я до этого пробовал ставить просто top: 50%, но центрировалось не по центру, в нашем случае, что делает transform: translateY(-50%)?

[Егор Живагин]

Kris125: собственно, сдвигает вверх на половину высоты элемента (высота самого элемента, не родителя)

[Kris125]

Егор Живагин: если честно не понимаю почему без транслета с top 50% не центрируются элементы?

[Егор Живагин]

Kris125: всё просто. top 50% сдвигает верхний край элемента по центру, а не сам элемент .

[Kris125]

Егор Живагин: спасибо большое, извиняюсь за поздний ответ, замоталась

Answer 2

[Islam Ibakaev]

1)

.parent { text-align: center }
.child { display: inline-block }

2)
.parent { text-align: center }

p.s. no flexbox involved

Comments

[Kris125]

text align выравнивает по горизонтали же

[Islam Ibakaev]

Kris125: да

[Kris125]

Islam Ibakaev: это не вопрос, а утверждение, по горизонтали мне не нужно выравнивать

[Islam Ibakaev]

Kris125: https://jsbin.com/xomagak