0

I have read all the other questions on Stackoverflow related to this topic, and none seem to fix my issue.

I have a nav bar at the top of my page that is fixed to the top left corner then a div in the centre containing an image and some texts.

My content is as so:

<div class="center">
    <div id="logo">&nbsp;&nbsp; <a class="home" href="index.html"> <img class="noborder" src="images/logocat.png" alt="" /> </a> 
    </div>
    <div id="top">
        <p class="toptext">TEXT</p>
    </div>
    <div id="contact">
        <table border="0" align="center">
            <tr>
                <td><a href="http://be.net/crookedcartoon"></td>
              <td><p class="contact-text1"> CROOKEDCARTOON@GMAIL.COM </p>
                <p class="contact-text2"> Alex: TEXT </p></td>
              <td><a href="2014.html"><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" /></a>
                </td>
            </tr>
        </table>
    </div>
    <div id="about">
        <p class="content-text-index">TEXT</p>
    </div>
</div>

The CSS for the mentioned div is:

.center {
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-492px;
    margin-left:-257px;
    padding:0px;
}

It wont centre vertically or horizontally there is no div or wrapper surrounding this div, or any conflicting css (as far as im aware) and it's becoming a pain.

Can anyone suggest a fix? I have tried the half margin/width etc idea and that is what is displayed above.

user3494604
  • 53
  • 1
  • 11
  • Why are you using tables for layout? – Paulie_D May 14 '14 at 10:42
  • Because the trick i read on here with the highest votes said that absolute positioning, with fixed height & width + the margins being half of those values would be the best way to centre a div regardless of browser size. And the tables are irrelevant to the question, but yeah i am updating it now once this is fixed. – user3494604 May 14 '14 at 10:45
  • I notice you are using `#center` instead of '.center` in your CSS. Could that be it? – Paulie_D May 14 '14 at 10:47
  • Yeah that was a silly mix up regarding class/ID, but it certainly hasn't worked, it created this: http://crookedcartoon.co.uk/index.html – user3494604 May 14 '14 at 10:53
  • Your previous CSS was correct. All you had to do was change `#center` to `.center` By the way, the `
    ` element has been deprecated. You should just use a div instead.
     – Paulie_D May 14 '14 at 11:02

3 Answers3

0

You can apply a ghost element to fill the 100% of the height of a parent element.

.wrap {
  text-align: center;
  height: 500px;
  background: #d4d4d4;
}

.wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.center {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

for a markup like this:

<div class="wrap">
  <div class="center">...</div>
</div>

An example: http://jsfiddle.net/LayyM/

Vangel Tzo
  • 8,885
  • 3
  • 26
  • 32
0

ok, forget everything and just use this CSS

html, body{ height: 100%; }

.center {
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -492px;
    margin-left: -257px;
    padding:0px;
}

And let me know if it's working.

Use CSS flex-box : http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

.center {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

You can go with CSS flex-box. and for old versions of IE you need use either this jquery solution http://dipaksblogonline.blogspot.in/2011/02/div-content-vertical-align-centermiddle.html

or use the display: table; property CSS to vertically align text to middle of div

Community
  • 1
  • 1
Dipak
  • 11,930
  • 1
  • 30
  • 31
  • Yep, that was a silly mistake to make, but it certainly doesn't fix the issue, here is what it created: http://crookedcartoon.co.uk/index.html – user3494604 May 14 '14 at 10:52
  • Flexbox was **another option** not a requirement. – Paulie_D May 14 '14 at 11:03
  • I know, i tried both options, and neither work, it still centres it in the upper right hand corner regardless, as for the webkit flex-box option it makes it fly off into the top-left corner. – user3494604 May 14 '14 at 11:08
  • The edits you seem to use with my CSS and simplified code work perfectly as the jsfiddle's show, but for some reason when implemented into my site, it makes the div sit in the top right corner, could the css attributes of the items within the div be effecting this? – user3494604 May 14 '14 at 11:11
  • @user3494604 check the edit - html, body{ height: 100%; } can be the solution. – Dipak May 14 '14 at 11:14
  • I noticed that, don't worry, but due to my website having the navbar fixed at the very top left of the webpage, i can't edit the body otherwise it will effect this too. – user3494604 May 14 '14 at 11:16
0

I notice you are using #center instead of '.center` in your CSS.

.center { /* as you have used a class in your HTML */
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-492px;
    margin-left:-257px;
    padding:0px;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Yep, was a silly mistake, but hasn't fixed anything. – user3494604 May 14 '14 at 11:02
  • It won't work if you are using flexbox as well as you seem to be doing. See http://jsfiddle.net/Paulie_D/4JMyS/3/ - I just changed the heights etc to make it easy to see. – Paulie_D May 14 '14 at 11:02
  • I was just using one or the other, both provided different results, either top-left corner or top right corner. – user3494604 May 14 '14 at 11:12
  • Then you must have something else going on. Perhaps you could make your own JSfiddle example so we can see the WHOLE Code. – Paulie_D May 14 '14 at 11:14
  • Here is my Jsfiddle: http://jsfiddle.net/d6a6c/ it's difficult to see without the images however. The actual site itself is viewable here: http://crookedcartoon.co.uk/index.html – user3494604 May 14 '14 at 11:18
  • Wow...that's a lot of relative positioning and negative margins. sorry but most of that is completely unnecessary. there are much better ways of laying out elements than that. However, again, changing the `.center` divs dimensions so yu can see it and just using a color...it does work. http://jsfiddle.net/Paulie_D/d6a6c/1/ – Paulie_D May 14 '14 at 11:45
  • Yeah, i have got rid of all the left/right negative margins and all of the relative positioning, here is the simplified jsfiddle: – user3494604 May 14 '14 at 11:50
  • http://jsfiddle.net/6qVQe/ However it is still off-centre horizontally and no where near the middle vertically, see here: http://crookedcartoon.co.uk/index.html This is a nightmare! – user3494604 May 14 '14 at 11:50