0

I'm trying to do something like this How to horizontally center a <div> in another <div>?

but with an position:absolute; div hovering over a table I created out of divs.

Here's a jsfiddle.. http://jsfiddle.net/2ntGu/ There's a lot going on, I tried to reduce it to as little as I could.

I'm specifically looking for the DEJA logo to go directly in the center where the suburbanite and gold drip logo are. These images are fluid as well, so regardless of screen size there will be four images horizontal.

Community
  • 1
  • 1
little tiny man
  • 789
  • 4
  • 10
  • 26

3 Answers3

2

Since you're using absolute positioning there's no easy way to do this. The best solution is to use a wrapper div set to the dimensions you need and then center the image inside that:

To center the image horizontally, set it to display: block and use margin: 0 auto

I didn't know if you needed it centered vertically as well, so I added a wrapper div and used the line-height trick:

#wrap { margin: 0 auto; width: 400px; height: 452px; line-height: 452px }
#wrap img { vertical-align: middle; }

Fiddle

You can adjust the measurements to center it as needed for your design.

helion3
  • 34,737
  • 15
  • 57
  • 100
1

Assuming you only care about recent versions of browsers, appropriate use of flexbox should solve all of your horizontal, vertical, and/or multi-item centering needs.

Joel Spadin
  • 436
  • 3
  • 7
0

It's not exactly exactly what I wanted, but the size of this header logo doesn't have to be fluid. I set the width to 300px, height:auto, left:50% and the margin:0 0 0 -150px. Because left is set at 50% it loads the start of the image half way through(not true 50% from a design perspective) Since 150 is half of 300 it keeps it entirely centered.

Wow

little tiny man
  • 789
  • 4
  • 10
  • 26