Question

并排设想两个矩形DIV。假设左边的为红色背景色，右边的为蓝色背景色。为了论证，我们假设每个像素的宽度为250px。高度根据其中的内容而变化，但通常为100px至300px。

我想显示一个字符，即正好位于中心的等号-即。垂直居中，红色DIV占50％，蓝色DIV占50％。

要实现解决方案，我这样做：

将红色DIV设置为width = {col-4
添加了一个中心DIV，也为红色，宽度为{col-1
将蓝色DIV设置为width = col-5

中心DIV包含等号，大小为50px x 50px，并在其周围有一个圆圈。

要垂直居中，我将中心列设置为display: flex和align-items: center。效果很好。

但是，请尽我所能，无论尝试如何，都无法改变角色。我怀疑这可能是因为我在父级DIV中使用了flex。

任何想法如何实现可行的解决方案？

Answer 1

在中央div中添加以下CSS：

display: flex;
justify-content: center;
flex-direction: column;
text-align: center;

您在这里所做的是使弯曲方向垂直，然后在该文本对齐之后使文本垂直居中：center

Answer 2

您使用的“ col-number”似乎与引导程序有关。我认为您在这里使事情变得过于复杂。

如果中央div的宽度为50px，则只需将页边距设置为-25px，并确保z-index高于页面中位于其后的div。

我尝试了以下代码，它似乎可以满足您的要求。

<div style="display:flex; align-items:center;">
  <div style="background:#f00; font-size:300px"> A </div>
  <div style="width:50px; margin:-25px; z-index:1; font-size:100px">=</div>
  <div style="background:#00f; font-size:500px"> B </div>
</div>

您可能希望CSS与标记保持独立。如果中心元素是图像，则无需将其包装在div中。只需将CSS应用于图片即可。

Answer 3

非常感谢Andrew Paul和Ankur Choudhury。我综合了您的回答，以得出有效的解决方案。

布局代码

<div className={`col-1 ${cn.CenterColumn}`}>
    <div className={cn.Equal}>
        =
    </div>
</div>

CSS代码

CenterColumn: css({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    border: '0.063em solid rgba(0, 0, 0, 0.1)',
    borderLeft: 'none',
    backgroundColor: '#ececec',
    zIndex: 1
}),

Equal: css({
    backgroundColor: 'black',
    width: '50px',
    height: '50px',
    borderRadius: '50px',
    fontSize: '50px',
    color: '#fff',
    lineHeight: '50px',
    textAlign: 'center',
    marginRight: '-78px'
}),

注意：上面的CSS代码实际上位于我的React组件的styles.ts文件中。

如何在DIV中垂直居中但水平浮动？

3 个答案: