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 的更多信息以了解更多相關信息）。