在另一个浮动 div 中水平居中绝对 div [关闭]

Posted 2023-03-06

【中文标题】在另一个浮动 div 中水平居中绝对 div [关闭]

【英文标题】：Center horizontally absolute div in another floating div [closed]

【发布时间】：2015-02-22 20:18:48

【问题描述】：

我有以下标记：

.container 
  top: 50px;
  width: 800px;
  height: 300px;
  background-color: red;
  position: relative;
  text-align: center;

.left 
  width: 500px;
  height: 100%;
  background-color: black;
  float: left;

.right 
  width: 200px;
  height: 100%;
  background-color: green;
  float: right;

.messageWrapper 
  overflow: hidden;
  bottom: 0;
  max-height: 100%;
  min-height: 20px;
  position: absolute;
  width: 170px;

.message 
  min-height: 20px;
  background-color: yellow;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;

<div class="container">
  <div class="left">
    ...
  </div>

  <div class="right">
    <div class="messageWrapper">
      <div class="message"></div>
    </div>
  </div>
</div>

这会产生以下结果：

我要做的是将yellou div水平居中放置在绿色中。它应该保持在相同的垂直位置，但稍微向右移动以在绿色 div 中居中。

这个问题得到越来越多的反对票。我要求所有反对者在这个问题下发表评论。这太荒谬了。这个问题有什么问题？？

【问题讨论】：

自己动手。没有人在这里为您编码。

在问题中包含您的代码有那么难吗？

the same vertical position as in example 是什么意思？

当我在问题中看到类似 I want! 的内容时，我会忽略它。

另外，你为什么主要把它标记为javascript？你的代码中没有JS

【参考方案1】：

这些是您需要更改的 css 元素：

.right 
    width: 200px;
    height: 100%;
    background-color: green;
    float: right;
    position: relative; //here

.messageWrapper 
    overflow: hidden;
    bottom: 0;
    max-height: 100%;
    min-height: 20px;
    width: 170px;
    text-align: center; //here
    width: 100%; //here
    position: absolute;  //here


.message 
    min-height: 20px;
    background-color: yellow;
    margin-left: auto; //here
    margin-right: auto; //here
    margin-bottom: 5px;
    width: 80%; //here

还有一个工作小提琴：http://jsfiddle.net/a1Lp2o52/