text-align: center 不能正常工作？

Question

我使用 javascript 来更改 div，但在更改 div 后， h2的样式将不再与中心对齐。

HTML：

    <div id="land" ontouchend="changepage()">
        <h1 id="headersize">Fish Pals</h1>
        <div id="landingimage"></div>
        <h1 id="headersize">Tap Me To Learn About Freshwater Aquarium Fish</h1>
    </div>

    <div id="items">
        <h2 id="center">Aquarium Fish</h2>
    </div>

id #center用于将文本与文本对齐居中居中，我曾尝试使用span将样式放入其中，但它不会居中

@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;
    }
}

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>

Answer 1

您的#items被定位为absolute ，它隐式地计算其及其子项的宽度。 为了使文本居中，该文本的容器需要跨越 100% 的可用空间。 下面是一个固定的片段。 我还将ontouchend更改为onclick以便于测试，但请随时将其更改回来。

另外，不确定您要通过网格实现什么目标。

 function changepage(){ var land = document.getElementById('land'); land.style.display = 'none'; var items = document.getElementById('items'); 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; width: 100%; } }

 <div id="land" onclick="changepage()"> <h1 id="headersize">Fish Pals</h1> <div id="landingimage"></div> <h1 id="headersize">Tap Me To Learn About Freshwater Aquarium Fish</h1> </div> <div id="items"> <h2 id="center">Aquarium Fish</h2> </div>

Answer 2

您的 Javascript 将display: inline应用于#items 。 但是作为内联元素，它只会与其内容一样宽 - 在这种情况下，与h2的文本一样宽，因此text-align: center在该文本上不会产生任何影响。 您可能应该将其更改为display: block ，默认为 100% 宽度。

此外， #items的绝对位置可能会将其置于不需要的位置（但我们需要有关其他元素的 CSS 的更多信息以了解更多相关信息）。