Question

所以...我得到了这段代码：https://jsfiddle.net/jmg63s3e/1/

如果您调整浏览器窗口的大小，直到text与image内联并且这是我想要实现的内容，那么代码实际上可以正常工作，但是如果你最终调整它的大小{即使text宽度远小于窗口宽度，{1}}仍会低于image。

我唯一的目的是：

整个wrapper在浏览器窗口中纵向和横向居中。它的总宽度和高度未知，取决于其子女
wrapper和row1不得内嵌：row2必须低于row2
row1内的所有元素（包含2个跨度的row1和image）必须互相内嵌
好吧，text里面spinner也必须在行内居中，但无论我尝试什么解决方案，这都不是问题

事实上，整个代码中唯一的动态元素是示例中包含row2的第一个span，因为它应该是播放器的名称，它可以是任何长度。< / p>

当然，如果我想让它响应，我将不得不使用媒体查询或动态改变宽度，高度和字体大小与JS，我愿意这样做。我的问题只有Player #1本身和wrapper低于text，即使image宽度比窗口宽度小很多，所以我是只要wrapper宽度小于窗口宽度，就要求解决方案正常工作。当wrapper宽度低于窗口宽度时，我将使用响应式媒体查询或JS处理该样式。我只想让wrapper在窗口中垂直和水平居中，其大小是动态的，取决于孩子。

我已经尝试过任何我能想到的解决方案，但是宽度未知wrapper我无法理解。有谁可以帮助我吗？我愿意接受任何建议和任何解决方案，只要它是纯CSS而且不涉及JS。提前谢谢大家

Answer 1

您可以使用flexbox来解决这些问题。

这是旧版CSS的更新小提琴注释：https://jsfiddle.net/jmg63s3e/3/

首先，要在水平和垂直方向上对齐包装器，您需要将父容器设为包含display: flex的弹性容器，并使用justify-content: center和align-items: center。您还需要设置一个高度，否则它将换行到孩子的高度而不会给你居中效果。我使用了以下内容。高度可以是你需要的任何高度。

.trump-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  overflow: hidden;
  height: 100vh;
}

接下来，我在包装器和display: flex上使用了flex-direction: column来确保它们都像我们希望的那样排成一行。

.trump-waiting .wrapper {
  display:flex;
  flex-direction:column;

为了修复row1，我再次使用了flexbox并删除了内联块和设置高度。只要您负责调整文本div中的字体大小，您就可以设置高度，例如使用媒体查询。否则，使用明确的高度，现在大小的字体将突破其容器。如果没有明确设置高度，容器将调整大小。

.trump-waiting .row1 {
  display: flex;
  flex-direction: row;
  /* display: inline-block; */
  /* height: 60px; */
  background-color: yellow;
}

我还将flex-shrink:0添加到 .image ，以防止它在调整大小时缩小。

为了让玩家＃1和'正在选择内联的王牌套装'，我还将display: flex和flex-direction: row添加到.row，使他们保持在同一条线上。

最后，为了对齐加载器，我做了上面使用的垂直/水平对齐技巧，并在div中添加了一些填充以给它一些空间并删除旧的CSS。

.trump-waiting .row2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;
  /* display: block; */
  /* margin-top: 50px; */

最后一步是使用媒体查询调整.text跨度上的字体大小，以便字体在调整大小时不会扩展其容器。

很多方法可以给猫皮肤，我相信其他人会有更好的解决方案，但希望这会有所帮助。如果需要，有一个很好的flexbox here摘要。我可能在这个摘要中遗漏了一个变化，但它应该都是小提琴。

编辑：意识到我错误地总结了jsfiddle中的css并删除了冗余的css属性。现在更新了。

纯CSS：垂直和水平居中的绝对定位元素，宽度取决于孩子

1 个答案: