Question

我有问题。我希望实现这样的目标： enter image description here

我有一个固定高度的div，还有2个其他div，里面有变量/未知高度，我想要

a）垂直居中
b）左/右浮动

现在我正在尝试这样的事情。

<div class="wrapper">
    <div class="left">This is left</div>
    <div class="right">This should be right</div>
 </div>

.wrapper:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
}

.left {
    display: inline-block;
    vertical-align: middle;
}

.right {
    display: inline-block;
    vertical-align: middle;
}

一切都完全居中，但正确的div位于左侧，而不是右侧。我一开始就进入

float: right;

进入我的右班，它位于右侧，但不再居中。我不知道如何实现这一目标。

提前谢谢！

Answer 1

在http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/处有一个非常敏捷的答案。它建议使用此代码：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

此问题还有其他解决方案，但这是最简单的。然后，您可以向左或向右浮动每个框。

编辑：另外一个链接有很多方法http://css-tricks.com/centering-css-complete-guide/

Answer 2

尝试使用Flexbox，例如

.wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.left {
    display: inline-block;
    vertical-align: middle;
    background: red;
}

.right {
    vertical-align: middle;
    background: green;
}

http://jsfiddle.net/hafpuvtq/

更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

在声明以下任何类之前，您必须首先在容器类之外设置 height：100％的html，body元素和 margin和0 填充：

HTML

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
    top: 50%;
    height: 100px;
}

.box1 {
    height: 100px;
    width: 100px;
    background-color: red;
    float: left;
}

.box2 {
    height: 100px;
    width: 100px;
    background-color: green;
    float: right;
}

左右两者都必须包含浮子; float：left; 的左框和 float：right;

的右框

Answer 4

这是正确的 - 浮动元素会将其从文档流中移除，因此它无法将自身与其父元素line-height对齐。相反，在两个子元素的每一个周围放置一个包装器div，并分别左右浮动包装器。确保他们的height为100%，然后将其中的孩子垂直对齐，就像您现在一样。

请参阅http://jsfiddle.net/conLs2fd/6/。

Answer 5

这个答案只是css

＆＃13;

.wrapper {
    position: relative;
    height: 200px;
    border: 1px solid gray;
}

.left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: lightgray;
    display:inline-block;
}

.right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: gray;
    display:inline-block;
}

＆＃13;

<div class="wrapper">
    <div class="left child">This is left</div>
    <div class="right child">This should be right</div>
 </div>

＆＃13;

Answer 6

这是一种方法，涉及在text-align: justify父块上使用.wrapper。如果您可以指定.wrapper的高度，那么可以将line-height设置为相同的高度值。

添加:after height: 0的伪元素，强制包含元素的换行符的第二行，这样可以使对齐起作用。

.wrapper {
  border: 1px dotted gray;
  height: 100px; /* for demo only */
  line-height: 100px;
  text-align: justify;
}
.wrapper:after {
  content: '';
  display: inline-block;
  height: 0;
  width: 100%;
}
.left, .right {
  border: 1px dotted blue;
  line-height: 1.2;
}
.left {
  display: inline-block;
  vertical-align: middle;
}
.right {
  display: inline-block;
  vertical-align: middle;
}

<div class="wrapper">
  <div class="left">This is left</div>
  <div class="right">This should be right</div>
</div>

垂直居中2个浮动div

6 个答案: