主页 / 问题 / 1432564
Accepted
Дмитрий Варзанов
Asked:2022-08-24 18:08:25 +0000 UTC2022-08-24 18:08:25 +0000 UTC

将块对齐到中心

  • 772

#cont {
        position: relative;
        background: red;
        height: 500px;
        width: 500px;
    }
    #ms {
        font-size:20px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
<div id=cont>
        <div id=ms>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
        </div>
</div>

块居中，但如果它的高度和尺寸小于内容，它看起来像这样

#cont {
    position: relative;
    background: red;
    height: 200px;
    width: 200px;
}
#ms {
    font-size:20px;
    position: absolute;
    top:50%;
    left:50%;
        transform: translate(-50%, -50%);
}
<div id=cont>
        <div id=ms>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
        </div>
</div>

问题是如何将子块居中并确保父块的宽度和高度不小于子块。

主要是parent的内容可以是任何东西，可以是文章列表，不需要居中对齐，也可能没有文章需要对齐子块。

也就是说，是否可以对齐子块，分配任何属性，但不要触摸父块。

换句话说，让子块阻塞并居中。

html

2 个回答

  1. 您可以通过使用 flex 或 grid 容器来解决大小和对齐问题。它们允许您将内容调整为容器的大小，反之亦然，并且非常容易对齐内容。如果你想创建一个响应式设计，在任何尺寸下都能很好地显示，那么你一定要熟悉上面的 flex 和 grid，这里有关于这些主题的好文章（Grid，Flex）。

    另外，应该拒绝使用px（像素）、pt（点）等绝对值，最好使用%（父值的百分比）、em（标准字体大小）这样的相对值乘数）等。

    这些是一般性建议，如有必要，我可以专门为您的文档做一个示例。

    • 1
  2. Best Answer

    1. 居中

    还是要换父母，否则很难达到预期的效果。正如@SonOfAMother 正确指出的那样，对于块的正确定位，很好flex：

    .cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  height: 200px;
  width: 200px;
}

.ms {
  font-size: 20px;
}
    <div class="cont">
  <div class="ms">
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
  </div>
</div>

    flex是最有用的工具。我建议你好好学习：

    2.内容溢出

    在这种情况下，它发生是因为父级的硬编码尺寸。如果这种刚性非常必要，那么您可以使用该属性overflow。

    它接受多个值。更多关于他们在这里。我建议在这种情况下auto：

    .cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  height: 200px;
  width: 200px;
}

.ms {
  font-size: 20px;
  font-size: 20px;
  overflow: auto;
}
    <div class="cont">
  <div class="ms">
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
  </div>
</div>

    如果没有一个属性overflow适合您，那么您将不得不放弃硬编码的尺寸。但是，作为一项规则，这就足够了。

    • 1

相关问题