troubleshooting Question

CSS question -- center inside a div using percentages

Avatar of Eric Bourland
Eric BourlandFlag for United States of America asked on
CSS
9 Comments3 Solutions126 ViewsLast Modified:
Good morning. Next silly question. =) I have two CSS problems at the moment; I've been struggling with these for a while.

1) I want to form a square DIV and center the text inside it -- using percentages rather than ems or px -- but the text does not quite want to center; the text looks shifted to the right?

2) And then, I would like the text and background image to scale when I scale the browser window -- shrink when the window gets smaller.

It's been a while since I did PSD to HTML and I am struggling a little.

What am I missing? Thank you very much for any advice.

Eric

Test page: http://www.cep-dc.org/test.cfm

The CSS:

.fpbluebox_latest {
background: ‪#‎98dafc‬ url(/img/CEP-latest-icon-fp.png) 50% 23% no-repeat;
width:20%;
height:20%;
padding:3.0em;
}

.fpbluebox_latest p {
color:‪#‎40535c‬;
font:normal 120% 'Open Sans', 'Oswald', sans-serif;
text-transform:uppercase;
text-align:center;
position: relative;
top: 2.6em;
border:1px solid #000;
}
ASKER CERTIFIED SOLUTION
Member_2_248744

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 3 Answers and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros