How do I center this?

How do i center my page to the v-axis?

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 1150 Views - Last Post: 14 September 2009 - 07:39 PM

#1 C++ Programmer  Icon User is online

  • D.I.C Addict
  • member icon

Reputation: 20
  • View blog
  • Posts: 545
  • Joined: 12-June 08

How do I center this?

Posted 11 September 2009 - 07:00 PM

I have tried putting this in the wrapper CSS

valign:center;


and that didn't work, also I put 
<style="valign=center;">
and 
<style="valign="center;"">


Can someone please tell me how to center my page, it would look alot better.

Thanks in advance.

This post has been edited by C++ Programmer: 11 September 2009 - 07:01 PM

Is This A Good Question/Topic? 0
  • +

Replies To: How do I center this?

#2 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,289
  • Joined: 12-March 09

Re: How do I center this?

Posted 11 September 2009 - 11:41 PM

if you want to center your page then try to use body
<body style="text-align:center">
your page contents
</body>


:)
Was This Post Helpful? 0
  • +
  • -

#3 C++ Programmer  Icon User is online

  • D.I.C Addict
  • member icon

Reputation: 20
  • View blog
  • Posts: 545
  • Joined: 12-June 08

Re: How do I center this?

Posted 12 September 2009 - 07:17 AM

I want to center it, but not to the x axis which is horizontal, I want to center the page in the middle of the page, on the y axis, like vertical.
Was This Post Helpful? 0
  • +
  • -

#4 Misfit  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 92
  • Joined: 18-July 09

Re: How do I center this?

Posted 12 September 2009 - 09:37 AM

View PostC++ Programmer, on 12 Sep, 2009 - 06:17 AM, said:

I want to center it, but not to the x axis which is horizontal, I want to center the page in the middle of the page, on the y axis, like vertical.


use margins.

<style type=text/css>
<!--

body
{
text-align:center;
margin-left: 20%; //the % number can be changed
}
-->
</style>


Is there an example we can look at? I'm pretty sure I know of the effect you're trying to display, but if you're only working with tables or div's it would be better to just make the class/id value text-align:center.
Was This Post Helpful? 0
  • +
  • -

#5 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: How do I center this?

Posted 12 September 2009 - 11:47 AM

Try sth like that:
<body>
<div style="height:200px;width:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;background-color:red">
</div>
</body>

Was This Post Helpful? 0
  • +
  • -

#6 C++ Programmer  Icon User is online

  • D.I.C Addict
  • member icon

Reputation: 20
  • View blog
  • Posts: 545
  • Joined: 12-June 08

Re: How do I center this?

Posted 12 September 2009 - 12:55 PM

I don't know if it is against the rules or not but my website is

iPlox.tk
I didn't come up with the name lol

But, it is centered, but I want it to be centered in the middle of the page too, so there's your example.
Was This Post Helpful? 0
  • +
  • -

#7 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: How do I center this?

Posted 12 September 2009 - 03:47 PM

Try this:
#wrapper {
left:50%;
margin:-230px 0 0 -350px;
position:absolute;
text-align:left;
top:50%;
width:700px;
}

But if height of content will change you must also change wrapper top margin. If you don't want to to this you should use table for this. All page must be in one cell, table must have height:100%.
<body>
<table style="height:100%;margin:0 auto">
	<tr><td>
	<div style="width:100px;height:100px;background-color:green"></div>
	</td></tr>
</table>
</body>

Was This Post Helpful? 0
  • +
  • -

#8 C++ Programmer  Icon User is online

  • D.I.C Addict
  • member icon

Reputation: 20
  • View blog
  • Posts: 545
  • Joined: 12-June 08

Re: How do I center this?

Posted 12 September 2009 - 04:52 PM

So, what you guys are telling me is that there is no code that is like valign, cause I am sure that I have seen websites with this.
Was This Post Helpful? 0
  • +
  • -

#9 hastings09  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 22-January 09

Re: How do I center this?

Posted 12 September 2009 - 04:59 PM

View PostC++ Programmer, on 12 Sep, 2009 - 03:52 PM, said:

So, what you guys are telling me is that there is no code that is like valign, cause I am sure that I have seen websites with this.



valign is an html table property as far as I know. Css has vertical-align, I'm not sure if it works like valign.
Was This Post Helpful? 0
  • +
  • -

#10 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: How do I center this?

Posted 13 September 2009 - 06:06 AM

It doesn't exist easy way to center sth in y axis using CSS. I know two ways to do this. One is position:absolute;top:50%;margin-top:-XXpx and the second - table with 100% height with one cell.
Was This Post Helpful? 0
  • +
  • -

#11 C++ Programmer  Icon User is online

  • D.I.C Addict
  • member icon

Reputation: 20
  • View blog
  • Posts: 545
  • Joined: 12-June 08

Re: How do I center this?

Posted 13 September 2009 - 07:59 AM

Allright, well I went to a website, and looked at the source and it says style="v-align:center;"

So, I don't know.
Was This Post Helpful? 0
  • +
  • -

#12 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 199
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: How do I center this?

Posted 13 September 2009 - 08:07 AM

without a strict height assigned the vertical alignment cannot be done as webpage documents are meant to grow with the page and have scrollbars if necessary. You must tell the browser how big you want the page to be with the height css attribute, then it should be easy to align it.
Was This Post Helpful? 0
  • +
  • -

#13 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 198
  • View blog
  • Posts: 974
  • Joined: 28-February 09

Re: How do I center this?

Posted 13 September 2009 - 05:00 PM

or just simply use a margin-top: then use a percentage. Im not sure why this is a big deal. The properties that you are trying to implement aren't going to work unless scaled because of varying browser size.
Was This Post Helpful? 0
  • +
  • -

#14 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: How do I center this?

Posted 14 September 2009 - 03:02 PM

margin 0 auto;
Was This Post Helpful? 0
  • +
  • -

#15 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 200
  • View blog
  • Posts: 1,561
  • Joined: 20-January 09

Re: How do I center this?

Posted 14 September 2009 - 03:31 PM

V-align is not a css property, it is an old HTML property - there is however vertical-align which is meant for text and div containers. And it is good to note that it doesn't work in the same way as the table v-align property, in order to achieve that you have to set the div (or other object)'s display to table-cell.
Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2