Text is not centered in div?

Dude1986 0
Viewed 31

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:

https://jsfiddle.net/upwaqyek/

.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.

flexbox css html
4 Answers

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>

userdKZu0

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

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>

Willpower-70

Try not to use h2 in this case: it has some default margins set up (based on just html defaults).

replace your h2 with something like a p.

    <div>
        <p>Text</p>
    </div>
</a>    
    <div>
        <p>Text</p>
    </div>
iamaword0
Related