Javascript 文本对齐：中心工作不正常？

我使用javascript更改div，但是在更改div之后，

h2

的样式将不再与中心对齐

HTML:

javascript运行良好。 JavaScript:

<script type="text/javascript">
    function changepage(){
        var land = document.getElementById('land');
        land.style.display = 'none';
        var items = document.getElementById('items');
        items.style.display = 'inline';
    }
</script>

函数changepage（）{
var land=document.getElementById（'land'）；
land.style.display='none'；
var items=document.getElementById（'items'）；
items.style.display='inline'；
}

您的

#项

被定位为

绝对

，它隐式地计算其及其子项的宽度。为了使文本居中，该文本的容器需要跨越100%的可用空间。下面是一个固定的片段。我还将

ontouchend

更改为

onclick

，以便于测试，但请随意更改

另外，也不确定你想用网格实现什么

函数更改页（）{
var land=document.getElementById（'land'）；
land.style.display='none'；
var items=document.getElementById（'items'）；
items.style.display='grid'；
}

@媒体屏幕和（最小宽度：375px）{
氢{
字号：80px；
字体系列：柠檬；
填充：0px；
边际：0px；
}
#居中{
文本对齐：居中；
}
#项目{
/*
显示：网格；
网格模板列：50px 1fr 50px；
网格列开始：2；
*/
显示：无；
位置：绝对位置；
宽度：100%；
}
}

鱼友
点击我了解淡水水族馆鱼类
水族馆鱼类

您的Javascript将

display:inline

应用于

#项

。但是作为一个内联元素，它的宽度只与它的内容一样大——在本例中，宽度与

h2

的文本一样大，因此该文本上的

text align:center

不会有任何效果。您可能应该将其更改为

display:block

，默认为100%宽度

---

另外，

#items

的绝对位置可能会将其放置在不需要的位置（但我们需要更多关于其他元素CSS的信息，以便了解更多有关该位置的信息）。

items.style.display=“grid”不确定网格。我们是否应该隐藏并显示网格的子元素？

@media screen and (min-width: 375px){
    h2 {
        font-size: 80px;
        font-family: lemon;
        padding: 0px;
        margin: 0px;
    }

    #center {
        text-align: center;
    }

    #items {
        display: grid;
        grid-template-columns: 50px 1fr 50px;
        grid-column-start: 2;
        display: none;
        position: absolute;
    }
}

<script type="text/javascript">
    function changepage(){
        var land = document.getElementById('land');
        land.style.display = 'none';
        var items = document.getElementById('items');
        items.style.display = 'inline';
    }
</script>