CODEWITHSUNDEEP
htmlcssalignmentoverlaycenter
Brent Palmer
Brent Palmer

Reputation: 1

How do you center multiple stacked DIVs on a page?

I am having trouble figuring out how to arrange the divs on this page so that they will be centered and not left aligned. Also, I wanted to overlay a lock icon in the corner. I was able to get it on there, but i want it to not affect the actual size of the image, but to overlap instead...Here is the fiddle to the CSS and HTML:

jsfiddle.net/bpalmer318/tpb2c7un/1/

To summarize: How do i center all the page content and how do i overlay the second image without making the bottom image smaller? (Note** The images used are just NFL logos but this will be for business purposes with company logos later)

I hope that this post serves to show others how to make complex div pages with overlaying images

Thank you for the help!

Upvotes: 0

Views: 49

Answers (2)

user3889392
user3889392

Reputation:

there are many ways to center the content of a page. Here just one:

On the html page:

<div id="center">your content here</div>

On the css:

  #center{

width:85%;
margin-left:auto;
margin-right:auto;

}

of course the porcentage should be adjusted to your needs i've tried this one in your example and it seems to look centered. Try to get the percentage to be exacly the same with(or maybe a bit more) of the content.

Hope it helps.

you can also see this post it may guide you : How to horizontally center a <div> in another <div>?

Upvotes: 1

slashsharp
slashsharp

Reputation: 2833

You can't center a float element.

Here's a demo using inline-block

Upvotes: 1

Related Questions