Why can't I centralize this text?

Question

I want to centralize the "Text" but it doesn't work with text-align: center.

HTML code:

<section class="product">
            <img src="capa.jpg">
            <p>Text</p>
            <h4> Name: x</h4>
            <h4> Type: y</h4>
            <h4> Pages: 100</h4>

enter image description here

CSS code:

.product p {
    background-color: #0f121f;
    color: aliceblue;
    /*padding: 5px 50px;*/
    width: 210px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5px;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    
}

can you try to add ```line-height: 23px;```? – psimms Nov 25 '22 at 20:31 — psimms, Nov 25 '22 at 20:31

score 0 · Answer 1 · answered Nov 25 '22 at 20:35

use flex!

p {
    background-color: #0f121f;
    color: aliceblue;
    /*padding: 5px 50px;*/
    width: 210px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5px;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    
}

p{
display:flex;
align-items:center;
justify-content:center;}

<section class="product">
            <img src="https://via.placeholder.com/210x200">
            
            <p>Text</p>
            
            <h4> Name: x</h4>
            <h4> Type: y</h4>
            <h4> Pages: 100</h4>

Why can't I centralize this text?

1 Answers1