Question

我想要一个居中的内容列，其徽标附在其左上角的外侧，如this fiddle中所示。

HTML：

<div>
    I'm centered
    <div>
        I'm glued to the centered div
    </div>
</div>

CSS：

div
{
  background-color: pink;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
div div
{
  width: 100px;
  height: 100px;
  background-color: cyan;
  left: -100px;
  top: 0px;
  position: absolute;
}

我对自己的解决方案不满意，因为它似乎是内容和演示文稿分离的失败 - 在我的情况下，青色框是徽标，粉色框是内容。我无法为内容和徽标创建包装div，因为它是我想要的内容，而不是内容和徽标。

有更清洁的方法吗？

Answer 1

您可以使用css属性display: flex

像这样：

<强> HTML

<div class="container">
  <div class="content">
    <div class="logo"></div>
  </div>
</div>

<强> CSS

.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.content
{
  background-color: pink;
  width: 300px;
  height: 400px;
}
.logo
{
  width: 100px;
  height: 100px;
  background-color: cyan;
  left: -100px;
  position: relative;
}

除非我没有得到问题所在。

将对象附加到居中div的一侧

1 个答案: