0

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!

Brent Palmer
  • 1

2 Answers2

1

You can't center a float element.

Here's a demo using inline-block

slashsharp
  • 2,823
  • 2
  • 19
  • 26
  • Thats great, my only reservation with not using float was that the images now are top aligned in the boxes as opposed to centered. That was one of my biggest challenges was allowing the images to center – Brent Palmer Feb 13 '15 at 17:34
1

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>?

Community
  • 1
  • 1