如何在Flex中垂直对齐内容？（仅添加Bootstrap问题！）>

Question

我需要在同一行中垂直放置两个div内容，并且使用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>
使用此代码，您可以看到绿色div内容居中，而Google徽标图片正确地位于whit div中。

问题现在到达，当我仅添加引导CSS

（我的项目中必需）时。现在，绿色的div仍然可以，但是白色的div失去了正确的功能。

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

为什么会这样并且对我来说更重要，我该如何解决这个问题？删除引导程序不是一个选项：（

我需要在同一行中垂直保留两个div内容，并且使用flex属性可以轻松实现。

...

Answer 1

在图像标签<img> display: inline-block;和vertical-align: text-top;中添加CSS

如何在Flex中垂直对齐内容？（仅添加Bootstrap问题！）>

问题描述投票：-2回答：1

1个回答

最新问题

如何在Flex中垂直对齐内容？ （仅添加Bootstrap问题！）>

问题描述 投票：-2回答：1

1个回答

最新问题

如何在Flex中垂直对齐内容？（仅添加Bootstrap问题！）>

问题描述投票：-2回答：1