Comment est possible d'aligner le contenu verticalement avec Flex? (Problème ne fait qu'ajouter Bootstrap!)

voix
0

Je dois aling vertical deux contenus divs dans la même ligne et j'ai réalisé facilement en utilisant les propriétés de flexion.

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8 />
    <meta name=viewport content=width=device-width, initial-scale=1>
    <link rel=stylesheet type=text/css href=./bootstrap-4.3.1/css/bootstrap.min.css>
</head>

<body>

<div class=mainContainer noselect>

    <div class=flex-container style=display: flex; width: 100%px; height: 30px; background-color: #063b61; justify-content: space-between; align-items: center; flex-wrap: nowrap;>
        <div class=flex-item1 style=background-color: white; width:142px; height: 18px;><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png alt=Grifols NAT Parachute title=Grifols NAT Parachute style=width:142px; height: 18px;/></div>
        <div class=flex-item2 style=background-color: green; color: white; font-size: 13px; font-weight: 600;>Centered!</div>
    </div>  

<script type=text/javascript> 

</script>

</body>
</html>

Avec ce code, vous pouvez voir le contenu vert div centré et l'image du logo Google correctement centré dans la div Whit.

Bonne

Les questions arrivent maintenant, quand j'ajoute que le CSS d'amorçage (obligatoire dans mon projet). Maintenant , le div vert reste ok , mais le blanc perd la Aligement correcte.

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8 />
    <meta name=viewport content=width=device-width, initial-scale=1>
    <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css integrity=sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T crossorigin=anonymous>
</head>

<body>

<div class=mainContainer noselect>

    <div class=flex-container style=display: flex; width: 100%px; height: 30px; background-color: #063b61; justify-content: space-between; align-items: center; flex-wrap: nowrap;>
        <div class=flex-item1 style=background-color: white; width:142px; height: 18px;><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png alt=Grifols NAT Parachute title=Grifols NAT Parachute style=width:142px; height: 18px;/></div>
        <div class=flex-item2 style=background-color: green; color: white; font-size: 13px; font-weight: 600;>Centered!</div>
    </div>  

<script type=text/javascript> 

</script>

</body>
</html>

Bad

Pourquoi est-ce qui se passe et plus important pour moi, comment puis-je résoudre ce problème? Retirer le bootstrap est pas une option :(

Créé 09/10/2019 à 13:02
source utilisateur
Dans d'autres langues...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more