提问人：James Brett 提问时间：11/10/2023 最后编辑：James Brett 更新时间：11/10/2023 访问量：49
这应该是一个简单的 CSS 样式挑战 [已关闭]
This should be a simple CSS styling challenge [closed]
问：
我想使选项卡内的两个文本项垂直居中，但我正在努力。如果我更改行高，它们看起来更好，但当我缩小窗口时（没有响应）则不然。相关网页：https://uk.outdore.co.uk/help/
如果您还可以在选项卡（红色箭头）之间添加一些间距，而不会导致选项卡进入 2 行，那将是一个奖励。
我无法在这里的代码示例中复制这个问题 - 其他样式覆盖了我在网站中的努力，生成最小的可重现示例的环境非常复杂。
答：
-2赞
vale
11/10/2023
#1
为了垂直居中 div 的内容，我会按如下方式设置其类的样式：
.divs-class{
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
-1赞
Prakash Mohit
11/10/2023
#2
嘿，我有点解决了你的问题 看到两个容器的宽度都是 50px，所以把它减小到 40px 然后为两个元素添加 10 px 的边距 您将在按钮之间获得所需的间隙。看，我将其更改为 40 像素并添加了 10 像素的边距，为 10px 的元素提供边距，并将两个元素的宽度从 50 像素减小到 40 像素，我还将边框半径更改为 29%，以便看起来更好。 希望它能:)
评论
0赞
Kalnode
11/10/2023
#3
看看CSS flexbox或grid，它会缓解一些事情。
你经常使用经典，但是，如果你只是使用更现代的，你可以通过一些简单的规则来获得定位、包装和居中，而无需媒体查询。或者，您也可以使用它来提供此功能，可以更好地控制项目之间的间距，但没有自动包装功能，因此您需要媒体查询。floatflexboxgrid
首先，在包装器中，删除并使用：ulfloatdisplay:flex
#epkb-main-page-container.epkb-tabs-template #epkb-content-container ul {
display: flex; /* By default items will be horizontally oriented */
flex-wrap: wrap; /* This will automatically stack your items vertically when then items run out of width. If you're picky, you can control this in media queries too. */
--myGapVariable: 2rem; /* set a gap value we can re-use in other places */
gap: var(--myGapVariable); /* adds a gap between your items, whether you use flex or grid */
}
其次，在课堂上，去掉和;使用及其居中规则：lifloatdisplay:blockflex
#epkb-main-page-container.epkb-tabs-template .epkb-nav-tabs li {
display: flex;
align-items: center;
justify-content: center;
}
同样，我不知道你为什么有这个，但要么消除它，要么做这个（并且应该在它前面有一个空格）：display: flex!important
#epkb-main-page-container.epkb-tabs-template .active {
/*display: block !important; */
display: flex !important;
}
此外，我们将宽度设置为 50%，但小于间隙值的一半。注意：如果在以下位置使用（而不是）方法，则不需要此技巧：gridflexul
#epkb-main-page-container.epkb-tabs-template .col-2 {
width: calc(50% - (var(--myGapVariable) / 2));
}
第三，对于标签内容，我认为在这一点上禁用并查看您的立场;这可能是不必要的。无论如何，在这里使用百分比和/或有一堆 1% 是很奇怪的;你是在轻推像素吗？你不应该这样做，假设更高层次的事情是正确的。padding
#epkb-main-page-container.epkb-tabs-template .epkb-nav-tabs li .epkb-category-level-1 {
/* Disable padding for now until you've smoothed out higher-level stuff; do you even need it? */
/* padding: 4% 1% 1% 1%; */
}
评论