0

I created a set of HTML pages for my web design class, but I was intentionally designing them so that it would look nice on my laptop only. One of my pages has a p tag that is centered with a left property of 66%, which worked really well. However, when I view it on a larger screen (like my desktop monitor), it isn't centered the same.

I've tried many different values on different properties like width, left, and right, but nothing seems to work for both screens. I even tried playing around with the div that it is contained in, but no luck.

Here's the CSS for the p (abouttext) and div (abouttextbox) tags.

#abouttextbox {
    position: relative;
    height: 100%;
    width: 100%;
}

#abouttext {
    position: relative;
    font-family: "Georgia", sans-serif;
    color: #e8e8e8;
    font-size: 1em;
    width: 100%;
    text-align: center;
    opacity: 0;
    top: 65%;
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Spencer Szeto
  • 5
  • 3
  • From css point of view the element is centered properly as expected even if it isn't what you expect. What you need for horizontal alignment is `margin: 0 auto;` , ideally you should be using flex-box but since this is a design class homework this should suffice – Dev Man May 25 '19 at 18:38
  • @ImmortalDude just tried using ```margin: 0 auto;``` but it doesn't seem to work in this situation. – Spencer Szeto May 25 '19 at 18:42
  • For centering you could also use `left:50%; transform: translateX(-50%);` instead. Here is a thread to get [`margin: 0 auto;`](https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work) to work. – AlexG Feb 13 '20 at 15:28

2 Answers2

1

Why have you put position: absolute to body.... Why why why....???

Also I can see both your css rules for #abouttextbox and #abouttext has position: relative... Is there any reason to mess up so much with the position??

Just removing the position: absolute from body, make the text centred for me... enter image description here

Sudipto Roy
  • 948
  • 8
  • 15
  • 1
    Thanks! I'm not quite sure why I put ```position: absolute;``` in the body, but ```position: relative;``` in ```#abouttext``` needs to be there. I removed it from ```#abouttextbox```. – Spencer Szeto May 25 '19 at 18:53
0

just replace the width of #abouttextbox with

margin-left: 25%;
margin-right:25%;

Yes!, it works for all sizes of screens. Your overall CSS should look like:

#abouttextbox {
position: relative;
height: 100%;
padding-left:25%;
padding-right:25%;
}

#abouttext {
position: relative;
font-family: "Georgia", sans-serif;
color: #e8e8e8;
font-size: 1em;
width: 100%;
text-align: center;
opacity: 0;
top: 65%;
}
Hadi
  • 66
  • 5