显示后将剩余元素居中：无

Posted 2023-03-05

【中文标题】显示后将剩余元素居中：无

【英文标题】：Centering remaining elements after display:none

【发布时间】：2015-12-20 01:28:33

【问题描述】：

注意：我使用的是 Flexbox

当屏幕调整大小时，我使用“display:none”来删除一些不再适合的元素，但一旦它们被删除，仍然显示的元素不再在它们的列中水平居中。

例如：（这不是代码它只是一个简单的说明）

|-------------------------------|
|       |       |       |       |
|  1 2  |  1 2  |  1 2  |  1 2  |
|-------|-------|-------|-------|  

例如：现在在“2”元素之后具有属性“display:none” 剩下的不再水平居中。

|-------------------------------|
|       |       |       |       |
|  1    |  1    |  1    |  1    |
|-------|-------|-------|-------|  

当我缩小并删除元素“2”时，保持水平居中的正确方法是什么？

【问题讨论】：

Flexbox 的行为很有趣，具体取决于您使用的浏览器以及实现方式。请添加您的代码并指定您的浏览器，以便我们为您提供帮助。

如果原始内容已经居中，默认情况下这实际上应该工作得很好，因为display:none 完全从渲染考虑中删除了元素。因此，没有代码就无法回答这个问题（实际上几乎总是如此）。

谢谢大家！你的线索帮助我在正确的区域寻找。留下“1”的元素我必须应用“margin：auto;”到那个。

实际使用"margin-left:auto; margin-right:auto;"在我的情况下结果更好，这个“margin：auto”原因开始导致一些垂直居中问题。

margin: auto 是一个很好的解决方案，但并不是真正必要的。如上所述，在display: none 生效后，居中应该保持不变。

【参考方案1】：

选项 1 - Flex 解决方案

要使 flexbox 中的项目居中 - 并使它们保持居中 - 您可以使用 justify-content 和 align-items 属性。

html

<article id="container">
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
 </article>

CSS

#container 
    display: flex;
    justify-content: center; /* align flex items horizontally (in this case) */
    align-items: center; /* align flex items vertically (in this case) */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;


section 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;


@media screen and (max-width: 500px) 
    span.two  display: none; 

DEMO（调整窗口大小以获得效果）

---

选项 2 - 文本对齐

另一种保持内容居中的方法是在父级上使用text-align: center。

HTML（同上）

CSS

#container 
    display: flex;
    justify-content: center; /* align flex items horizontally (in this case) */
    align-items: center; /* align flex items vertically (in this case) */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;


section 
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;
    text-align: center;


@media screen and (max-width: 500px) 
    span.two  display: none; 

DEMO

【参考方案2】：

一种方法是使用 javascript 完全从 DOM 中删除“2”元素，然后 flexbox 会将剩余元素居中。

var element2 = document.getElementById("element2");
element2.parentNode.removeChild(element2);

另一种方法是将“2”元素设置为“position:absolute”，然后flexbox将无法移动它，其余元素将居中，就好像它不存在一样。

#element2
  display:none;
  position:absolute;