Как можно выровнять по вертикали содержания с помощью Flex? (Проблема только добавление Bootstrap!)

голоса
0

Мне нужно вертикальной Aling две дивы содержание в одной и той же линии, и я достиг легко, используя гибкие свойства.

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

С помощью этого кода вы можете увидеть зеленый содержание Div центрированного и логотип изображение Google правильно расположенное в центре йоты дел.

Хорошо

Проблемы прибывают теперь, когда я только добавить загрузочный CSS (обязательно в моем проекте). Теперь зеленый ДИВ остается в порядке , но белый один теряет правильный 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

Почему это происходит и что более важно для меня, как я могу решить эту проблему? Удалить самозагрузки не вариант :(

Задан 09/10/2019 в 13:02
источник пользователем
На других языках...                            

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