0

введите сюда описание изображения

подскажите, как сверстать также кнопку и то что под ней, используя флексбокс, без position: absolute нужно чтобы кнопка была по центру страницы, а начало строки ниже равнялось по левой стороне кнопки.

9
  • Какие у Вас возникли проблемы с этим?
    – user207618
    Commented 31 мая 2018 в 21:08
  • Наверное большие,если упоминается absolute... Commented 31 мая 2018 в 21:08
  • @Александр может тогда подскажите, если все так просто ?
    – marates
    Commented 31 мая 2018 в 21:18
  • Разметку и стили свои добавьте в вопрос Commented 31 мая 2018 в 21:22
  • @Александр мне нужно это в контексте конкретного блока, а не всей страницы, дизайн не важен моя верстка вообще не на html в этом случае
    – marates
    Commented 31 мая 2018 в 21:24

2 ответа 2

4

Свойство justify-content - отвечает за расположение элементов по горизонтали.

p{
	margin: 0;
}
.column{
	padding: 100px;
	border: 1px solid black;
	margin: 10px;
}

.block{
	display: inline-block;
	border: 1px solid black;
	padding: 15px;
}

.oneBlock{
	display: inline-block;
}

input{
	display: block;
	padding: 5px;
}
.inputBlock{
	display: inline-block;
	margin-bottom: 15px;
}

.button{
	border: 1px solid #333333;
	border-radius: 5px;
	padding: 10px;
}
.button___block__img {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}
.button___block{
	display: flex;
	margin-top: 10px;
}
.text__botoom {
    font-size: 12px;
    width: 100%;
}
.text__botoom{
	font-size: 12px;
}
.text__button{
	text-align: center;
}

.button___block__img img{
  max-width:20px;
}
<body>
	<div class="block">
		<div class="inputBlock">
			<input type="text">
			<input type="text">
			<input type="text">
		</div>
		<div class="buttonBlock">
			<div class="button"><p class="text__button">Sign Up</p></div>

			<div class="button___block">
				<p class="text__botoom">or sign up using</p>
				<div class="button___block__img">
					<img src="https://www.e-monsite.com/medias/images/integrer-fb.png" alt="">
					<img src="https://cdn131.picsart.com/265831648017212.png?r1024x1024" alt="">
					<img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_google_plus-128.png" alt="">
				</div>	
			</div>
		</div>
	</div>

</body>

0
-2

Нужно сделать что-то типа такого:

.social {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
<div class="buttons">
  <div class="buttons_row"></div>
  <div class="buttons_row">
    <div class="social">
      <div class="social__text"></div>
      <div class="social__buttons"></div>
    </div>
  </div>
</div>

Вот хорошее руководство по flexbox, в котором можно посмотреть как вертикально выравнивать элементы.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.