对齐-项目-居中，同时保持背景全高
在Bootstrap 4中，一行中有两列。如果我尝试在行上使用align-items-center或在col上使用align-self center来垂直对齐内容，h4是居中的，但背景不是全高的。以下是一支笔https://codepen.io/geo555/pen/pyalbe
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-sm-4">
<img src="https://via.placeholder.com/400X400" class="img-fluid">
</div>
<div class="col-sm-4 text-center bg-dark text-white align-self-center">
<h4>Awesome desk</h4>
</div>
</div>
</div>
共有1个答案
使cold-flex flex-column，并在标题上使用垂直自动边距(my-auto)...
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-sm-4">
<img src="https://via.placeholder.com/400X400" class="img-fluid">
</div>
<div class="col-sm-4 border text-center bg-dark text-white d-flex flex-column">
<h4 class="my-auto">Awesome desk</h4>
</div>
</div>
</div>
https://www.codeply.com/go/7nppnbxhf4
-
我希望和在中间对齐。 如何使完全向右？ 之前： 之后： null null https://jsfidle.net/z44p7bsx/
-
问题内容： 我有一个具有以下属性的flex容器（蓝色正方形）： 因此，其子项（浅蓝色方块）如下所示排列它们自己。但是，我想从正常流程中添加另一个孩子（绿色正方形）并将其相对于其父对象放置。要将其定位在下面，如您所见，我最好编写类似bottom: 20px;和的内容margin: auto;。 我试着z-index无济于事。我应该如何处理？我应该使用另一个父元素吗？ 问题答案： 以下是实现此布局的五
-
问题内容： 我的网站上移动菜单的底部有一个基于伸缩的无序社交媒体图标列表。 我正在尝试让三排并排坐，等距离分开。我已经用规则来解决了 但是 我的问题是，当有三个以上的项目时，下一行从中间开始填充，而我希望 随着用户添加更多图标， 它从左侧开始填充 。 我越深入地解释这一点，我就越不确定这是否可能，但是我想我还是把它扔出去了，以防万一。 是否可以使下一行中的列表项从容器的左侧开始，而不会弄乱规则？
-
我使用布局管理器将此配置为： 我的具体情况是子项没有预定义的宽度。相反，我将它们的宽度设置为 然后我希望为每个项目提供1/3的可用空间。 到目前为止很好，但我希望，如果在最后一行只有1或2个项目显示，我想居中他们。 正如您在最后一行中看到的，这些项被拉到布局的边缘，父项的宽度在它们之间被分割。这是因为正如我所说的，它们的宽度不是预先确定的。 我所期望的是计算项目的宽度，因为它们显示为每行3个项目，
-
问题内容： 我们的页面看起来像这样 我们想要这样显示： 1）我们需要在中心显示文本和文本字段 2）我们需要为页面的某些部分添加背景色 CSS html 请帮助我找到解决方案。 提前致谢 问题答案： 替换此样式并检查它 替换代码
-
本文向大家介绍在Bootstrap 4的不同屏幕上将单行项目居中对齐，包括了在Bootstrap 4的不同屏幕上将单行项目居中对齐的使用技巧和注意事项，需要的朋友参考一下 在Bootstrap 4中使用.align-items-*-center类在不同屏幕上的中心对齐单行项目。 让我们看看如何在小，中和大屏幕尺寸的中心对齐一行上的弹性项目- 在中间的小屏幕尺寸上对齐 在中间的中等屏幕尺寸上对齐 在