0

I am approaching to css grid and i am surprised about the behaviour of the property justify-self. What i am trying to achieve is to center some text inside a div.

This is my code:

.page-5 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 5fr;
    height: 100vh;
}

.page-5-black {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    background-color: black;
}

.page-5-phrase {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    color:white;
    font-weight: bold;
    font-size: 60px;
    justify-self: center;
}

.page-5-button {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 3fr 2fr;
}
.page-5-button-sub1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    
    display: grid;
    grid-template-columns: 2fr 5fr 2fr;
    grid-template-rows: 1fr 3fr 1fr;
    
    color: white;
    text-transform:uppercase;
    background-color:rgb(117, 232, 255);
    border-bottom-left-radius:28px;
    border-bottom-right-radius:28px;
    border-top-left-radius:28px;
    border-top-right-radius:28px;
    cursor:pointer;
}
.page-5-button-sub2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
    justify-self:center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/page5.css">
</head>
<body>

<div class="page-5">
    <div class="page-5-black">
        <span class="page-5-phrase">Join my company and nobody gets hurt</span>
        <div class="page-5-button">
            <div class="page-5-button-sub1">
                <span class="page-5-button-sub2">Okay, i am in</span>
            </div>
        </div>
    </div>
</div>

</body>
</html>

As you can see, the text "Join my company and nobody gets hurt" is not affected by the justify-self property. On the other hand, if such text would be reduced to just "Join" you would see that the text would be aligned correctly. Clearly this has something to do with the available space for the cell and the contained text.

So, my goal is to align "Join my company and nobody gets hurt" in the cell just like the text "Join" is aligned.

How can i achieve my goal?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
BabaNew
  • 884
  • 1
  • 13
  • 27
  • The text is taking all the available space inside it's grid area thanks to it being long and `font-size:60px` justify-self will have no effect, maybe `text-align:center` will get you there – Rainbow May 07 '20 at 15:37
  • it sound to me like text-align and font-size are not the grid way of doing things. What is the grid way to achieve such result ? How can i control the font size and alignment ? – BabaNew May 07 '20 at 17:02

0 Answers0