Vertical align to center in a div

Hi,
I'm putting together a css layout in dreamweaver CS3, i have a basic nav bar with a solid black colour with text on top. I'm trying to vertical align the text to the center, currently it's center horizontally, but the text is right at the top of the div. The only way i've been able to change the position is to use "line height"
Any there any easy way to do this in css?
Any help is much appreciated, thanks.

Hi again,
I'm having a bit of trouble trying to get my main text area vertically center on one of my pages, i have a two column layout(text area on the right). The above methods don't seem to work, they just seem expand my whole bodyArea downwards.
Currently my codes look like this:
Layout:
<style type="text/css">

</style></head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="nav"><a href= nav text here </a></div>
<div id="bodyArea">
    <div id="left"></div>
    <div id="shadow"></div>
    <div id="right">text with paragraphs here</div>
    <div id="footer">copyright info here</div>
</div>
</div>
</body>
</html>
stylesheet:
#wrapper {
     width: 781px;
     margin-right: auto;
     margin-left: auto;
        height: 699px;
#wrapper #logo {
     height: 116px;
        background-image: url(../images/logo.jpg);
#wrapper #nav {
     height: 38px;
     text-align: center;
     color: #FFFFFF;
     font-family: "Courier New", Courier, monospace;
     font-size: 19px;
     line-height: 38px;
     background-repeat: no-repeat;
     background-color: #000000;
     margin: 0px;
#wrapper #bodyArea #left {
     width: 341px;
     float: left;
     height: 507px;
#wrapper #bodyArea #right {
     width: 440px;
     float: right;
     height: 507px;
     text-align: center;
     color: #000000;
     vertical-align: middle;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
#wrapper #bodyArea #right #shadow {
     height: 14px;
     background-image: url(../images/shadow.gif);
     background-repeat: repeat-x;
#wrapper #bodyArea #footer {
     height: 38px;
     clear: both;
     text-align: center;
     color: #FFFFFF;
     background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 15px;
     line-height: 38px;
     margin: 0px;
p {
     margin-top: 0px;
     margin-right: 10px;
     margin-bottom: 15px;
     margin-left: 10px;
I'm fairly new to CSS layouts, if anyone could help me it would be much appreciated, thanks.

Similar Messages

Vertically Align to center of text box

I have a project that has 500+ Peices and each one consists of a 1 of three logos and 1 of 500+ lines of text and all the lines of text are different lengths
I am using data sets and variables.xml to create them all quickly. Now the problem I am having is getting the text to wrap properly this was easilly solved by using a text box. But now I would like to center all text vertically inside the box. Can someone point me in the right direction.

You are welcome, darkorical.
Depending on the task/options, it may be worth looking at this thread,
http://forums.adobe.com/thread/756492?tstart=30
and at the
JET_AutoFitVertical.jsx
JET_SetCapsHeight.jsx
scripts mad available by James here:
http://www.illustrationetc.com/AI_Javascripts/TextScripts.htm

Vertical alignment in table cells not working in generated output

Using RH9 WebHelp. I have created a simple table style. Because I could not find out how to make cell vertical alignment (top, center, bottom) part of the style definition, I have been applying it manually to individual whole tables using the cell alignment properties.
This worked fine for a while, but at some point I noticed that even though the tables look right in Design view, with top-aligned cells contents, it gets hosed in generating output and all tables now come with vertically centred cell contents even through the in-line formatting for top alignment is still there in the code.
Any ideas?

Hi Mike,
I'm confused to where you applied the vertical alignment. Normally, I would set this for the table cells and not the table.
CSS has indeed an order in rendering: There is a point system for determining the CSS to apply. See http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specific ity/ for a short introduction.
And as an extra to the point system, the place where the styling is present, also determines the styling. Browsers use the following hierarchy (in descending order)
User style sheet defined in the browser.
Inline styling.
Style block in page.
External style sheet
You can overwrite styling from a lower order using the !important declaration. You can use this to make sure that inline styling will not be able to overwrite styles from your style sheet. (Unless the inline styles use !important themselves.) Example:
table.mytable td {
vertical-align: middle !important;
This will make all the content of table cells in the table with the class mytable to be vertically centered.
Greet,
Willam

Standalone multi-line JLabel vertical alignment

I have a JLabel subclass that I am using an a Servlet environment, with iText to create a PDF. When I set the vertical alignment to CENTER, the vertical spacing is not correct and the label runs off the bottom of its allocated area. The JLabel is not attached to any Container, it is simply a standalone JLabel with no parent.
I've done a little digging/debugging and it appears that the View (a javax.swing.plaf.basic.BasicHTML$Renderer) is returning the height of a single line of text from getPreferredSpan(View.Y_AXIS), even though when painted, the label spans several lines. This causes SwingUtilities.layoutCompoundLabel to calculate the wrong starting Y value for the text area.
When I use this JLabel subclass in a GUI/Swing program that I have, added to a JPanel, it works correctly.
Looking for any clues or suggestions.

Partial answer:
I noticed that in the GUI environment, that the paint() method was being called twice. The first time through, the height of the text was calculated as I described above in the standalone environment - for only a single line of text. The second time through, it calculated the height correctly.
I changed my subclass to call super.paint(g) (with a dummy Graphics) if there is no parent. This "fixes" the problem in the standalone environment.
I theorise that it takes 2 passes through the size calculations in the View - once to set the width and again to set the height. Any further insights are welcome.

"Vertical Align Center" Text and a Shape

Hi designers,
I wonder if anyone could give me a hand with aligning text and shapes? I would like to align a number to the center of a circle. "Horizontal Align Center" works well. "Vertical Align Center", however, does not yield the desired result. The number turns out to be higher in the cycle (see figure below). The distance from the top of the circle to the top of the number zero, X, is shorter than the distance between the bottom of the circle and the bottom of the number zero. Is it possible to equal these two distances?
Figure 1: The Outcome of Vertical Align Center
Thanks,
Haobo

Hi Mylenium,
Thank you very much for you very prompt reply, which solves the problem very effectively.
If you do not mind, I have got two further questions.
Firstly, is there an option similar to "Align to Path: Centre" under "Type on a Path Options" that changes how text is aligned?
Secondly, does InDesign offer the aforementioned function?
I sometimes label a large quantity of locations with alphanumeric characters, which are subject to frequent changes, and therefore would like to preserve the text if possible. I have heard that manipulating text is InDesign's area of expertise. If this function is not available in Illustrator but offered by InDesign, I can jot down another reason for acquiring the latter and split the workflow in the future.
Thanks,
Haobo

Why does Vertical Align Center align objects along the horizontal?

And why does Horizontal Align Center align objects along the vertical?
-g-
P.S. Please please please make the Eydropper tool available by function key so I can toggle to it while using the Text tool. Please!

g,
but when I select two objects and click the vertical align button they snap to an invisible horizontal line
This is (almost) identical to:
Because (the centres of) vertically aligned objects will be on the same horizontal level/line.
And that is just one way of expressing what vertical alignment means. Here are a few others:
Their centres have the same height,
Their centres have the same Y value on the Artboard/Workspace,
In all cases, you can draw a horizontal line through their centres.
Mathematically, Y = C (Y is a constant value C) is the equation for a horizontal line.

Photo grid alignment - cannot align or center vertically

I'm adding photos into a photo grid and cannot center them vertically within the blue box of the grid. I'm using 1 column so that each photo appears as large as possible. I've cropped and edited the photos in iPhoto, so some are horizontally shaped while most are portrait shaped. They automatically want to position themselves in the blue photo box, not allowing me to center them vertically so that their spacing on the photo page appears more even. Adjusting spacing on the photo grid pop-up does not help this problem.
Is there a way to center vertically a photo within a single column photo grid?

Thank you, but the problem has not been solved. When I click on the narrow line blue box and go to Arrange-Align Objects-Center, only the first photo in the group moves position. All other photos, relative to each other, have uneven spacing, especially vertically. Either there is lots of space between them, or they are jammed together - all depends on their shape. When I try to Command Click each photo to then Arrange-Distribute Objects-Vertically, these menu options are not available (gray). It works on text blocks, and individually placed photos in other areas, but not on photos brought into a photo grid. Unless each photo is exactly the same shape and size, spacing and aligning in the grid is very uneven. Any more ideas?

Unable to vertical align flash file

I have previously posted this on the Dreamweaver forum, however, have not been able to obtain a response.
I have been attempting to align a flash file created with FC in the center of a web browser with CSS. The file is 800 x 600 px and I was hoping to centre the file using CSS.
I have created a Div Tag wrapper around the .swf and can get the file to center horizontally, however, the file will not move from the top of the browser.
I would prefer not to use tables, and would like to keep the file simple with CSS.
Any suggestions would be appreciated.
JB

Yes it is a bit tricky to vertically align content. Take a look at this example that shows you how to setup your <div> containers.
http://www.webtoolkit.info/css-vertical-align.html
Hope this works for you.
Tanya

Vertical Alignment and Loading

Two questions. I've just uploaded a client's site as a
sub-folder of my own in order to test it out.
www.rebeccapike.co.uk/home.html
I want to know how to center the page horizontally having
used <div> tags and placed everything within a base layer.
I'm sure this is done in the properties inspector somewhere but I
can't work it out.
Secondly, some of the pages don't seem to be loading when you
link to them. For example if you go to the main menu
(www.rebeccapike.co.uk/menu.html) and click the "photographie"
link, the page only seems to load after clicking refresh a few
times... could someone tell me why?
Thanks very much in advance.
Rebecca

Okay - you're really not making much sense here. Your subject
reads
"Vertical Alignment and Loading" and yet you're asking about
horizontal
alignment, so - which is it?
Horizontal: <div style="margin: 0 auto">...</div>
Vertical + Horizontal:
http://www.apptools.com/examples/tableheight.php
Also - I have no problems loading the "Photographie" link in
both Firefox
1.5.04 and IE6 on Windows XP - they both load instantly with
one click.
BTW: That is an incorrect spelling of the word, photography -
but I assumed
or *hoped* you already knew that.
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"rfkarchitects" <[email protected]> wrote in
message
news:e5psma$ae8$[email protected]..
> Two questions. I've just uploaded a client's site as a
sub-folder of my
> own in
> order to test it out.
>
> www.rebeccapike.co.uk/home.html
>
> I want to know how to center the page horizontally
having used <div> tags
> and
> placed everything within a base layer. I'm sure this is
done in the
> properties
> inspector somewhere but I can't work it out.
>
> Secondly, some of the pages don't seem to be loading
when you link to
> them.
> For example if you go to the main menu
(www.rebeccapike.co.uk/menu.html)
> and
> click the "photographie" link, the page only seems to
load after clicking
> refresh a few times... could someone tell me why?
>
> Thanks very much in advance.
>
> Rebecca
>

How do I vertically align paragraphs in a page?

I am new to Pages, and I've run across a problem that is really aggravating because it should not be rocket science... but it seems to be, at least for me.
I need to center the text on the page so there is equal white space above and below it.
In Word, you select File --> Page Setup --> Layout --> Vertical Alignment and choose "Center." Done.
How do you do this Pages? I've scoured the manual and online help and can find nothing on this.
Thanks in advance!

Note that the Vertical Alignment does not apply to the Text Layer of a Word Processing document, just to the text in objects that accept text within the shape. For your application you would probably want to add a text box, centered on your page, to hold the text that you want to center.
Regards,
Jerry
Message was edited by: Jerrold Green1

Vertical alignment in cross-tab

Hi,
Anyone of you know how to align the measures Vertically Centered In Cross-tab report? As far as i know, there is option for Horizontal alignment; but no options for Vertical alignment. By default the text are docking on top aligned!!!
Help me out to solve this or any work-around to achieve this?
Thanks in Advance
Viswa

Hey Anindita,
I was not asking about the text orientation. I want to align the text in the cross tab report to be vertically aligned center.
I want the text in each cell should be aligned centered both horizontally as well as vertically. Horizontal alignment is available in cross tab formatting but not for the vertical alignment.
Thanks
Viswa

Vertical Alignment in Word 2007 Avery Label 5366

I am having trouble getting my text to center vertically within the label area. I have already set the alignment to center and the line spacing befor and after are set to 0. I am still getting a "SHIFT" of the text towards the bottom of the label
area. I have even tried setting alignment to top and then increasing the spacing to get the letters centered. Using ARIAL BLACK I am trying to fit a size 48 letter and get it centered. I am printing the alphabet so the word size is not an issue. The result
is a large white space over the letters with the bottom legs of the cap A getting chopped by the label border.
http://i1329.photobucket.com/albums/w545/DjTrex24/Word2007_LabelAlignment_zps83d28960.jpg

I trying my hard to search for the answer of the question exactly the same as you. It took me several days, but finally I got an answer.
You can use centerVertically property of group, set this property to "true" will centrally align the control in the group.
For example
                <group id="g1" label="Group1" autoScale="false"
centerVertically="true">
                       <box id="box1" boxStyle="horizontal">
                           <control idQ="NavigationPaneFind" visible="true" size="small"/>
                           <control idQ="FileSendAsAttachment" visible="true" size="small"/>
                       </box>
                       <box id="box2" boxStyle="horizontal">
                           <control idQ="FormatPainter" visible="true" size="small"/>
                           <control idQ="Cut" visible="true" size="small"/>
                       </box>
               </group>

How to vertically align text in a table in Pages09

Why cant I do a vertical text alignment to center text in a table cell that has been resized

Hi tundra,
In Pages '09, use the Text Tab in Inspector. Select the cell(s) and
Or
Regards,
Ian.

Vertical alignment off in table columns

I have a table with 3 columns with one row above and below
Text in left and right column is aligned to the top but in
the middle column the text will not align to the top. In IE it is
correct but in Firefox 1.6 it is down by 1 line
How to correct?
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML
xmlns="
http://www.w3.org/1999/xhtml"><HEAD><TITLE>BustedComputer</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=iso-8859-1" />
<style type="text/css">

</style>
</HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width=800 align=center
border=0>
<TBODY>
<TR>
<TD colSpan=3 bgcolor="#6699FF">Top</TD>
</TR>
<TR>
<TD width="150" bgcolor="#6699FF"><a
href="#">leftside</a></TD>
<TD bgcolor="#FFFFCC"><p>Contrary to popular
belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin
literature from
45 BC, making it over 2000 years old.<br>
<br>
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written
in 45 BC. This book is a treatise on the theory of ethics,
very popular
during the Renaissance. The first line of Lorem Ipsum,
"Lorem ipsum dolor
sit amet..", comes from a line in section 1.10.32.</p>
</TD>
<TD width="150" bgcolor="#FFFFCC">rightside</TD>
</TR>
<TR>
<TD colSpan=3 bgcolor="#6699FF">Bottom</TD>
</TR></TBODY></TABLE></BODY></HTML>

Could it be that you are seeing the top margin on the
<p> tag?
<TD bgcolor="#FFFFCC"><p>Contrary to popular
belief
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"davidhelp" <[email protected]> wrote in
message
news:[email protected]...
>I have a table with 3 columns with one row above and
below
> Text in left and right column is aligned to the top but
in the middle
> column
> the text will not align to the top. In IE it is correct
but in Firefox 1.6
> it
> is down by 1 line
>
> How to correct?
>
> David
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
> <HTML
> xmlns="
http://www.w3.org/1999/xhtml"><HEAD><TITLE>BustedComputer</TITLE>
> <META http-equiv=Content-Type content="text/html;
charset=iso-8859-1" />
> <style type="text/css">
> 
> </style>
> </HEAD>
> <BODY>
> <TABLE cellSpacing=0 cellPadding=0 width=800
align=center border=0>
> <TBODY>
> <TR>
> <TD colSpan=3 bgcolor="#6699FF">Top</TD>
> </TR>
> <TR>
> <TD width="150" bgcolor="#6699FF"><a
href="#">leftside</a></TD>
> <TD bgcolor="#FFFFCC"><p>Contrary to popular
belief, Lorem Ipsum is
> not
> simply
> random text. It has roots in a piece of classical Latin
literature
> from
> 45 BC, making it over 2000 years old.<br>
> <br>
> Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
"de Finibus
> Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero,
> written
> in 45 BC. This book is a treatise on the theory of
ethics, very
> popular
> during the Renaissance. The first line of Lorem Ipsum,
"Lorem
> ipsum
> dolor
> sit amet..", comes from a line in section
1.10.32.</p>
> </TD>
> <TD width="150"
bgcolor="#FFFFCC">rightside</TD>
> </TR>
> <TR>
> <TD colSpan=3 bgcolor="#6699FF">Bottom</TD>
>
</TR></TBODY></TABLE></BODY></HTML>
>
>

Can table cell vertical alignment be defined via CSS?

In a table cell (ie, "td") is there a way to define "valign" via CSS, instead of the table cell proper?
In other words, instead of...
<table>
<tr>
<td valign="top">
...is it possible to do :
<table>
<tr>
<td class="top">
...and somehow let the stylesheet define the vertical alignment?
I'm asking because none of the attribute presets in Dreamweaver CS4 seem to provide for vertical alignment. Everything else on God's green earth seems to be there, but table cell vertical alignment seems to be the ONLY thing CSS forgot about.

How about giving the class "top": text-align:center. Or even the tag "td" in your stylesheet. Does that help?
John

Vertical align to center in a div

Similar Messages

Maybe you are looking for