CODEWITHSUNDEEP
javascripthtmlcss
Bryan Lin
Bryan Lin

Reputation: 3

text-align: center is not working properly?

I used javascript to change the divs but after changing the divs the style for the h2 will not align to the center anymore.

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>

The id #center is used to center the text with text align center, I have tried using a span to put style into it as well and it would not center

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

The javascript is working fine. 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>

Upvotes: 0

Views: 69

Answers (2)

Johannes
Johannes

Reputation: 67768

Your Javascript applies display: inline to #items. But as an inline element it will only be as wide as its contents - in this case as wide as the h2's text, so text-align: center on that text won't have any effect. You should probably change that to display: block, which defaults to 100% width.

Also, the absolute position of #items might place it at an undesired position (but we would need more info about the other elements' CSS to know more concerning that).

Upvotes: 0

Hugo G
Hugo G

Reputation: 16496

Your #items are positioned absolute, which implicitly calculates its and its children width. In order to center a text, the container of that text needs to span 100% of the available space. Below is a fixed snippet. I also changed ontouchend to onclick for easier testing, but feel free to change that back.

Also, not sure what you are trying to achieve with the grid.

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>

Upvotes: 1

Related Questions