Text is not centered in div?

Question

So I'm kind of a begginner and I just encountered a problem that I don't know how to solve.

Here is the code:

.parent{
    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;
}

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
}

I can't center the text. I think it has to do with the width and height but it really doesn't move at all. The text just stays static there at the bottom of the div and doesn't do anything when I change the div height.

I want the text to be in the center of the div, both horizontally and vertically.

Robin · Accepted Answer · 2022-09-23T01:44:31.407

-1

Just add this two properties to your .parent div. Of-course there are lots of ways to do this, but I'm writing answer base on your existing code.

.parent div {
   // your others styles
   display: flex;
   justify-content: center;
}

.parent{
    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;
}

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}



.parent div:hover {
   background-color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div class="parent">
    <a>    
      <div><h2>Text</h2></div>
    </a>    
    <div><h2>Text</h2></div>
  </div>
</body>
</html>

edited Sep 23 '22 at 01:44

answered Sep 23 '22 at 01:38

Robin

4,902
2
27
43

That worked really good. But I have one more question. What if I wanted to add a new row, like another text below the h2? Flex forces everything to stay in one row. Is there something that can be done? – Dude1986 Sep 23 '22 at 02:07
@Dude1986 yeah, then add `flex-direction: column` - it positions the items in vertical order. – Robin Sep 23 '22 at 02:35
For more about flexbox, you should check this https://web.dev/learn/css/flexbox/ – Robin Sep 23 '22 at 02:37

Steffen · Answer 2 · 2022-09-23T01:53:01.473

You can center the text by making the container div a flexbox:

.parent div {
    display: flex;
    justify-content: center; /*center horizontally */
    align-items: center; /* center vertically */
}

Your text is pushed down because h2 tags have a default not 0 margin (The margin varies between browsers). It's not necessary, but I would recommend setting the margin value for header tags to 0.

h1, h2, h3, ... {
    margin: 0;
}

score -1 · Answer 3 · answered Sep 23 '22 at 01:48

for the targeted div, add display: flex; to it, then to center its content horizontally, add justify-content: center; and to center its content vertically add align-items: center;

.parent{

    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;

}

.parent div {

    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}



.parent div:hover {
   background-color: white;
}

 <div class="parent">
    <a>    
    <div>
        <h2>Text</h2>
    </div>
</a>    
    <div>
        <h2>Text</h2>
    </div>
</div>

Text is not centered in div?

3 Answers3