我有一个 flex 容器,里面有单独的子容器。在这些子容器中,我有一个简单的内容 div 和一个标题 div。我想要做的是将标题文本垂直居中,但将其保持在框的顶部。然后,我尝试将内容 div 在框中居中,水平和垂直。
我已经弄明白了(但我知道这段代码是一大堆胡言乱语),但是现在当视口(viewport)尺寸减小时,内容文本(溢出:隐藏)不会在尺寸减小时隐藏。我发现这与边距设置为 0 有关,但我需要将其设置为 0 才能使该死的内容 div 居中!
我们非常感谢您提供的任何帮助。这是我创建的 jsfiddle 的链接,以帮助您可视化问题。更改视口(viewport)的大小,您会看到我的问题,即“玩家之间的总现金”框。
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
最佳答案
要阻止内容溢出,overflow: hidden
必须在元素的父 容器上。
在这种情况下,这将是类 .flex-info
的任何 div。
看看下面的实践。
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
overflow:hidden;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
</div>
关于html - 隐藏的溢出不适用于 flexbox 和 margin auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47064916/