CODEWITHSUNDEEP
htmlcss
Samarjoy Pandit
Samarjoy Pandit

Reputation: 9

Adding text to the div, shifts the div

I need a little help. I have attached a basic html code. There are 2 rectangles. The main rectangle with id as "maindiv" and another rectangle with id "subdiv". The "subdiv" is in center of the "maindiv". Now, when I add the text to the "subdiv", it shifts down a little and the "subdiv" is not in the center of the "maindiv" anymore. What should I do to:

  1. Put the text in center of the "subdiv".
  2. Keeping 1 in mind, i get the "subdiv" in center of "maindiv".

JSFiddle (Without adding text)

JSFiddle (After adding text)

Full Code:

p {
  color: white;
}
#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}
.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>Rectangle</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 84

Answers (5)

Learner
Learner

Reputation: 281

Please apply following style to your subdiv, so your text will be at center position as well as your subdiv also.

#subdiv{
position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 45px;
    width: 60%;
    height: 40%;
    background-color: brown;
    text-align: center;

}

Upvotes: 2

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

use display:inline for your <p> tag,it's works fine

p {
  color: white;
  display:inline;
}
#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}
.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>Rectangle</p>
    </div>
  </div>
</body>

</html>

Upvotes: 0

shyamm
shyamm

Reputation: 550

its just because <p> tag takes default margin. to remove it add in css

p
{
margin:0;
}

Upvotes: 0

gordonturibamwe
gordonturibamwe

Reputation: 1087

<!DOCTYPE html>
<html>
    <head>
        <style>
            p{
                color: white;
            }
            #maindiv{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            #subdiv{
                position: relative;
                margin: auto;
                top: 30%;
                width: 60%;
                height: 40%;
                background-color: brown;
                text-align: center;
            }

            .rectangle{
                height: 200px;
                width: 300px;
                background-color: yellowgreen;
            }
          .rectangle p {margin: 0px;}

        </style>
    </head>
    <body>
        <div id="maindiv" class="rectangle">
            <div id="subdiv" class="rectangle">
                <p>Rectangle</p>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Esko
Esko

Reputation: 4207

Browsers add margin for the p tag by default, remove that with margin:0 and it won't happen:

p {
  color: white;
  margin: 0;
}

#maindiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#subdiv {
  position: relative;
  margin: auto;
  top: 30%;
  width: 60%;
  height: 40%;
  background-color: brown;
  text-align: center;
}

.rectangle {
  height: 200px;
  width: 300px;
  background-color: yellowgreen;
}
<body>
  <div id="maindiv" class="rectangle">
    <div id="subdiv" class="rectangle">
      <p>
        Rectangle
      </p>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions