Cum este posibil să se alinieze pe verticală de conținut cu Flex? (Problemă numai adăugarea de Bootstrap!)

voturi
0

Trebuie să aling verticale două conținuturi divs în aceeași linie și am realizat cu ușurință folosind proprietăți flex.

<!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>

Cu acest cod puteți vedea conținutul div verde centrat și logo-ul Google imaginea centrat corect în div pic.

Bine

Probleme sosesc acum, când am adăuga doar CSS bootstrap (necesar în proiectul meu). Acum div verde rămâne ok , dar cel alb pierde aligment corect.

<!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>

aligment

De ce se întâmplă acest lucru și mai important pentru mine, cum pot rezolva această problemă? Eliminați bootstrap nu este o opțiune :(

Întrebat 09/10/2019 la 13:02
sursa de către utilizator
În alte limbi...                            

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