CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 19

Why does my text align vertically instead of horizontally?

div {
     background-color:green;
     height:500px;
     width:500px;
     margin:auto;
     border-radius:50%;
     overflow:hidden;
     padding:300px;
     border: 4px solid red;
     box-sizing:border-box;
}
<div>
  <p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p> 
</div>

Hello, I would like to know how am I supposed to make this text go vertically and don't move out of the div? I've already tried doing vertical alignment but it didn't work for some reason.

Upvotes: 1

Views: 920

Answers (2)

Chayim Friedman
Chayim Friedman

Reputation: 70860

Did you set CSS setting box-sizing to border-box? If so, this is the reason. Your padding is too big, so the width & height are small. You can decrease the padding, or set the CSS setting box-sizing to content-box especially for this element.

Upvotes: 0

Furkan Poyraz
Furkan Poyraz

Reputation: 692

You can easily achieve this by using flexbox.

div {
  background-color: green;
  height: 500px;
  width: 500px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid red;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div><p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p> </div>

Upvotes: 1

Related Questions