Html 垂直居中2个浮动div_Html_Css

Html 垂直居中2个浮动div

html css

Html 垂直居中2个浮动div,html,css,Html,Css,我有个问题。我想实现这样的目标：我有一个固定高度的div，里面还有两个可变/未知高度的div a）垂直居中 b）左/右浮动现在我正在尝试这样的事情 <div class="wrapper"> <div class="left">This is left</div> <div class="right">This should be right</div> </div> 所有东西都完全居中，但右d

我有个问题。我想实现这样的目标：

我有一个固定高度的div，里面还有两个可变/未知高度的div

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

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

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

所有东西都完全居中，但右div紧挨着左div，不在右侧。只要我开始投入

float: right;

在我右边的课堂上，它在右边，但不再居中。我不知道如何实现这一点

提前谢谢你

没错-浮动元素会将其从文档流中移除，因此它无法将自身与其父元素的

行高对齐。相反，在两个子元素的周围放置一个wrapperdiv
，并将wrapper分别浮动到左侧和右侧。确保其高度
为100%
，然后与当前一样，垂直对齐其内部的子对象
请参阅。
对此有一个非常明确的答案，它暗示了以下代码：
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这个问题还有其他解决方案，但这是最简单的。然后，您可以将每个框向左或向右浮动
编辑：另一个有很多方法的链接
尝试使用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;
}


更多信息：
这个答案只是css

.wrapper{
位置：相对位置；
高度：200px；
边框：1px纯色灰色；
}
.左{
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：100px；
高度：100px；
保证金：自动；
背景颜色：浅灰色；
显示：内联块；
}
.对{
位置：绝对位置；
排名：0；
底部：0；
右：0；
宽度：100px；
高度：100px；
保证金：自动；
背景颜色：灰色；
显示：内联块；
}

这是左边
这应该是正确的
这里有一种方法，包括在.wrapper
父块上使用文本对齐：justify
。如果可以指定.wrapper的高度，则
可以将行高度
设置为相同的高度值
在高度为0的伪元素之后添加：强制为包含元素的行框添加第二行，这将允许对齐工作

.wrapper{
边框：1px点灰色；
高度：100px；/*仅用于演示*/
线高：100px；
文本对齐：对齐；
}
.包装工：之后{
内容：''；
显示：内联块；
身高：0；
宽度：100%；
}
.左，.右{
边框：1px点蓝色；
线高：1.2；
}
.左{
显示：内联块；
垂直对齐：中间对齐；
}
.对{
显示：内联块；
垂直对齐：中间对齐；
}

这是左边
这应该是正确的
在声明以下任何类之前，必须首先在容器类外部设置html、高度为100%的body元素以及边距和填充为0：
HTML
左侧和右侧都必须包含浮动；左侧浮动框：左侧；和右侧浮动框：右侧 你发布的CSS不会在你的图像中生成结果。我同意这是可行的。但是你也要把高度放在包装纸上100%，如果你想要两个水平对齐的效果，就像Michael Buckley建议的那样，有很多不同的方法。我推荐这种方法，因为它遵循了您在示例中所采用的方法，但您可能会发现其他一些方法更适合您（请记住flexbox和css转换的向后兼容性问题）哦，太好了，这非常简单，效果很好。谢谢
.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;
}

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

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;
}