Я не уверен на 100%, имеете ли вы это в виду, но для уменьшения вертикального расстояния между гибкими элементами необходимо удалить стандартные теги margin
h1
и h4
по умолчанию (кстати, выопечатка в закрывающем теге h2/h4
).
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
Я добавил margin: 0
к дочерним элементам, которые перемещают их ближе друг к другу.Уже одно это выровняет гибкие элементы в верхней части их контейнера, и я понял, что вы хотите, чтобы они были в вертикальной середине, поэтому я также добавил / изменил align-content: center;
для контейнера.HTH
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h4>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>