Logo et deux divisions de texte centrées de façon verticale et horizontale sur la page [dupliquer] - html, css, layout

Quelle est la meilleure façon et la meilleure pratique pour atteindrecette mise en page? Ce qui signifie qu'il restera cohérent sur iPad, Android ou sur le bureau. CSS Grids? Flexbox? Logo div doit être centré sur la page verticalement et horizontalement. Les divisions de texte doivent être centrées au centre du logo div.

voici la maquette de la mise en page

Réponses:

Il n'y a pas de bonne façon, vous pouvez utiliser ce que vous voulez, mais je suggérerais Flexbox pour cette demande, mais vous pouvez le faire avec la grille ou alors ..

.container{
display: flex;
justify-content: space-around; /* to meet your need or space-between*/
align-items: center; /* vertical */
}

.container{ /* get all the space */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.container, .container > .item{
display: flex;
justify-content: space-around; /* horizontal, nice to try: center or space-between*/
align-items: center; /* vertical */
}

.item {
border: 2px solid blue;
width: 150px;
height: 100px;
}

.large{
height: 200px;
}

@media screen and (max-width: 480px) { /* using media query to detect screen size */
.container{
flex-direction: column; /* switch display into column */
}
}

<div class="container">
<div class="item">Text Div Centered</div>
<div class="item large">Logo Centered</div>
<div class="item">Text Div Centered</div>
</div>

Vous pouvez utiliser Flexbox pour y parvenir. Au début créer un .flex conteneur avec display:flex propriété. Maintenant appliquer flex:1 à ses enfants. Tous ses enfants acquièrent une largeur égale.

Mais à partir de l'image montrée, votre Logo Divs hauteur est plus grande, appliquez la même chose ici sur chaque élément. Mais, si vous observez, rien n'est centré. Donc, afin de centrer chaque case, vous devez utiliser les propriétés align-items:center et justify-content:center sur le .flex.

Même maintenant, le texte à l'intérieur n'est pas centré, mais les cases sont centrées verticalement et horizontalement. Pour obtenir le même résultat sur les enfants, appliquez display:flex et la même méthode de centrage décrite ci-dessus à ses enfants aussi. Maintenant, le contenu des enfants, c’est-à-dire que le texte à l’intérieur est également centré.

.flex, .flex > div{
display:flex;
align-items:center;
justify-content:center;
}
.flex > div{
flex:1;
height:80px;
margin:5px;
border:1px solid blue;
}
.flex .logoDiv{
height:150px;
width:100%;
}

<div class="flex">
<div class="textDiv">Text Div Centered</div>
<div class="logoDiv">Logo Centered</div>
<div class="textDiv">Text Div Centered</div>
</div>

Pourriez-vous utiliser une table? et enlevez la frontière / cellulespacing??

   td {
display: table-cell;
text-align: center;
vertical-align: middle;
}

<table>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
</table>