подскажите, как сверстать также кнопку и то что под ней, используя флексбокс, без position: absolute нужно чтобы кнопка была по центру страницы, а начало строки ниже равнялось по левой стороне кнопки.
-
Какие у Вас возникли проблемы с этим?– user207618Commented 31 мая 2018 в 21:08
-
Наверное большие,если упоминается absolute...– АлександрCommented 31 мая 2018 в 21:08
-
@Александр может тогда подскажите, если все так просто ?– maratesCommented 31 мая 2018 в 21:18
-
Разметку и стили свои добавьте в вопрос– АлександрCommented 31 мая 2018 в 21:22
-
@Александр мне нужно это в контексте конкретного блока, а не всей страницы, дизайн не важен моя верстка вообще не на html в этом случае– maratesCommented 31 мая 2018 в 21:24
|
Показать ещё 4 комментария
2 ответа
Свойство 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>
Нужно сделать что-то типа такого:
.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, в котором можно посмотреть как вертикально выравнивать элементы.