Vertical alignment on large resolution

30 New Member

Hi All,

How can I align table/DIV in middle on large resolutions?

Just go to this link, my portfolio

And this on large resolution, it is coming on top of the page.

I want to align page content to middle of the browser height.

Thanks in advance

Oct 9 '06 #1

Subscribe Reply

2328

rachwelian

New Member

The only way I know how to do it would be to put it in a table with valign set to "middle" and height="100%"

Oct 9 '06 #2

jaymanson

New Member

Here's a fairly simple trick to do this with CSS:

First, the HTML file:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

   <title>Untitled Document</title>
 
   <!-- Link to your CSS style sheet here -->

   <link href="test.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
   <div id="pixel">
 
      <div id="wrapper">
 
         <!-- Put your site content in here -->
 
      </div>
 
   </div>
 
</body>
 
</html>

and the CSS:

Expand|Select|Wrap|Line Numbers

 /* CSS Document */
 
/* First we make a 1x1 pixel container div.

The 50% / 50% absolute positioning centers it on the screen

The overflow ensures anything inside it will spill out to fill the screen */
 
#pixel {

    width: 1px;

    height: 1px;

    position: absolute;

    top: 50%;

    left: 50%;

    overflow: visible;    

}
 
/* Now we make the wrapper to hold your site content.

It can be any width or height, but the 'right' positioning value must be 

set to half the 'width' and the 'bottom' value set to half of the 'height' */
 
#wrapper {

    width: 400px;

    height: 240px;

    position: relative;

    right: 200px; 

    bottom: 120px;

}

I've put explanations inside the code. This is all CSS - no tables required :-)

Let me know if you have any problems.

- Jay

Oct 10 '06 #3

jaymanson

New Member

Actually, when I think about it, this would be slightly better:

Expand|Select|Wrap|Line Numbers

 #wrapper {

    width: 400px;

    height: 240px;

    position: relative;

    right: 50%; 

    bottom: 50%;

}

Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

Jay

Oct 10 '06 #4

jaymanson

New Member

Actually, when I think about it, this would be slightly better:

Expand|Select|Wrap|Line Numbers

#wrapper {

    width: 400px;

    height: 240px;

    position: relative;

    right: 50%;

    bottom: 50%;

}

Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

Jay

Scratch that last post - the 50% thing works in IE but not in FF! Looks like you'll have to get the calculators out and do it the first way I suggested lol

It's 1am here and obviously way past my bedtime now!

Oct 10 '06 #5

Similar topics

vertical alignment of image

by: abracad | last post by:

Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?

HTML / CSS

Vertical Alignment and (#2) Horizontal Rule Problems...

by: Frank Wheeler | last post by:

Why am I unable to attain proper vertical alignment between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left;...

HTML / CSS

XHTML/CSS Standard Vertical Centering sought

by: Kenneth | last post by:

Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to...

HTML / CSS

struct and union alignment

by: S.Tobias | last post by:

I would like to check if I understand the following excerpt correctly: 6.2.5#26 (Types): All pointers to structure types shall have the same representation and alignment requirements as each...

C / C++

Vertical alignment of table cell contents in FireFox

by: Andy Mabbett | last post by:

Please can someone remind me of the most elegant fix for the way Firefox fails to vertically align cell content by default? For example, the second event on: ...

HTML / CSS

malloc() and alignment

by: Yevgen Muntyan | last post by:

Hey, Consider the following code: #include <stdlib.h> #define MAGIC_NUMBER 64 void *my_malloc (size_t n) { char *result = malloc (n + MAGIC_NUMBER);

C / C++

Hide input text

by: C.W.Holeman II | last post by:

I what to hide an input element and the following text. I have the selector for the input working and just need to grab the text following it. CSS: form{ display:table; text-align:center; }

HTML / CSS

Centering Both a Background Layer and Text Layers in css

by: ayamopamo | last post by:

Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...

HTML / CSS

vertical-align

by: Bill | last post by:

Hi How can I have IE7 act correctly on that ? The rules make the link text go down when hovered. It works in FF , I had to add a hard space right after the LI tag to have OP9 work but I can't...

HTML / CSS

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp