Hvordan er det mulig å justere vertikalt innhold med Flex? (Problem bare legge Bootstrap!)

stemmer
0

Jeg må vertikal aling to divs innholdet i samme linje og jeg har oppnådd enkelt ved hjelp flex egenskaper.

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

Med denne koden kan du se den grønne div innhold sentrert og Google-logoen bildet riktig sentrert i whit div.

God

Problemer kommer nå, når jeg bare legge bootstrap CSS (påkrevd i prosjektet mitt). Nå grønne div fortsatt ok, men den hvite mister riktig aligment.

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

Hvorfor skjer dette og mer viktig for meg, hvordan kan jeg løse dette problemet? Fjern bootstrap er ikke et alternativ :(

Publisert på 09/10/2019 klokken 13:02
kilden bruker
På andre språk...                            

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