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

spoiler
Прошу прощения за, возможно, кривой БЭМ


Как сделать заголовок по середине?5c0a5d4503dc6753213289.jpeg
Вот html
<header class="header">
			<div class="container">
				<div class="header-top">
					<div class="header-top__left">
						<div class="logo"><img src="images/ZET.png" alt="" class="logo-pic"></div>
					</div>
					<div class="header-top__right">
						<button id="mmenu-icon" class="hamburger hamburger--collapse" type="button">
  							<span class="hamburger-box">
    							<span class="hamburger-inner"></span>
  							</span>
						</button>
						<nav id="menu" class="nav">
							<ul class="nav__list">
								<li class="nav__item">
									<a href="" class="nav__link">Home</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Services</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Works</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Clients</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Team</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Companies</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Price</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Contact Us</a>
								</li>
							</ul>
						</nav>
					</div>
					<div class="header__tittle">
						<div class="header__tittle-top">
							<h1 class="header__tittle-top header-txt">Something Nothing</h1>
						</div>
						<div class="header__tittle-middle">
							<p class="header__tittle-middle header-txt">Enean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend<br>ac, enim iam ultricies nisi eleifend tellus.</p>
						</div>
						<div class="header__tittle-bottom">
							<a href="" class="header__tittle-bottom-btn section__tittle-btn header-txt">LET'S TALK</a>
						</div>
					</div>
					<div class="header-bottom__arrow"><a href="" class="header-bottom__arrow-btn"><i class="fas fa-angle-down"></i></a></div>
				</div>
			</div>
		</header>

Вот css, но он выравнивает только по ширине, по длине не хочет
.header {
	display: flex;
	display: -webkit-box;
  	display: -ms-flexbox;
	background-image: url('/images/bg-header.png');
	min-height: rem(700px);
	height: 100vh;
	background-size: cover;
	background-position: center;
	&__tittle {
		justify-content: center;
		text-align: center;
		margin: 0 auto;
		position: relative;
		max-width: 625px;
		&-top {
			font-family: 'Montserrat';
			font-size: rem(36px);
			font-weight: 700;
		}
		&-middle {
			font-family: "Open Sans";
			font-size: rem(17px);
			letter-spacing: -0.42px;
		}
	}
	&-txt {
		color: $font-head-style;
	}

	&-top__left {
		padding-top: rem(40px);
		justify-content: flex-start;
	}

	&-top__right {
		justify-content: flex-end;
		float: right;
	}
}

.hamburger-inner, .hamburger-inner:before, .hamburger-inner:after {
	background-color: #fff !important;
}
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 3
Chefranov
@Chefranov
Front-End, Back-End
&__tittle {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    position: relative;
    max-width: 625px;
}
Ответ написан
@Sinnk
Как вариант:
&__tittle {
     margin-left: 50%;
     transform: translate(-50%, 0);
}
Ответ написан
lukoie
@lukoie
Для этого в бутстрапе4 есть классы
align-self-center
d-flex align-items-center
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы