Question

我正在尝试创建一个应该有两列的小网站，每列应该以其内容为中心。

但是，我注意到列将遵循彼此的高度，而不是作为单独的列。例如。每当我向其中一列添加内容时，另一列的内容将被移动以适合该列的高度。

在JSFiddle中，您可以看到＆＃34; Hello＆＃34;在右侧没有完全居中;它已被提升到与左边的三个中的第一个一致的“你好”＃34;我希望如此，每当我向一列添加内容时，它都不会影响另一列 - 所以＆＃34; Hello＆＃34;理想情况下，在右侧应完全居中。

JSFiddle：https://jsfiddle.net/goupb2ch/1/

我已经做了很长一段时间了。有任何想法吗？谢谢！

Answer 1

考虑使用flexbox来解决您的问题：在这种情况下，需要的代码要少得多。

https://jsfiddle.net/upwgk2u4/

.container {
  display: flex;
  text-align: center;
  height: 100%;
}

.container > div {
  flex: 1;
  align-self: center;
}

Answer 2

为什么不使用已经在Bootstrap 4中的内容？ 无需额外的CSS 。

https://www.codeply.com/go/0zwGz83Cbw

<div class="container">
    <div class="row">
        <div class="col-md-6 text-center">
            <p>Hello</p>
            <p>Hello</p>
            <p>Hello</p>
        </div>
        <div class="col-md-6 align-self-center text-center">
            <p>Hello</p>
        </div>
    </div>
</div>

HTML，CSS，Bootstrap - 两列中心

2 个答案: