473,543 Members | 2,454 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

vertical-align: center

If I want to have the middle of an image vertically aligned with the
middle of a heading (or several lines of heading), is there some
particular way people would recommend? vertical-align: center looked
made for that. The effect I want is

img heading
img heading
img heading
or
heading
img heading
img heading
heading
or
img
img heading
img heading
img

I want a liquid layout, and I won't know in advance the relative size of
the image or the heading (which will be different for every page). Plus
the heading is likely to be long in some cases, and flow into several
lines if the viewpoint is narrow.

You guys are about to tell me that vertical-align: center will not work
in a certain much used web browser that Macintosh users don't have,
aren't you?

--
http://www.ericlindsay.com
Dec 3 '05 #1
2 12129
in comp.infosystem s.www.authoring.stylesheets, Eric Lindsay wrote:
If I want to have the middle of an image vertically aligned with the
middle of a heading (or several lines of heading), is there some
particular way people would recommend? vertical-align: center looked
made for that. The effect I want is I want a liquid layout, and I won't know in advance the relative size of
the image or the heading (which will be different for every page). Plus
the heading is likely to be long in some cases, and flow into several
lines if the viewpoint is narrow. You guys are about to tell me that vertical-align: center will not work
in a certain much used web browser that Macintosh users don't have,
aren't you?

Yes, and should not work on any much used Mac browser either. Use
vertical-align:middle

Vertical-align:middle is not exactly made for this, as you want to do
multiline vertical align, as it is only for vertical align inside linebox
usually.

Some ways to do vertical centering:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Choose some that fit your purpose...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Dec 3 '05 #2
In article <MP************ ************@ne ws.individual.n et>,
Lauri Raittila <la***@raittila .cjb.net> wrote:
in comp.infosystem s.www.authoring.stylesheets, Eric Lindsay wrote:
If I want to have the middle of an image vertically aligned with the
middle of a heading (or several lines of heading), is there some
particular way people would recommend? vertical-align: center looked
made for that.
Yes, and should not work on any much used Mac browser either. Use
vertical-align:middle
Opps, thanks for that. I guess I was looking at text-align as well and
didn't recall the correct item for vertical-align.
Vertical-align:middle is not exactly made for this, as you want to do
multiline vertical align, as it is only for vertical align inside linebox
usually.
So if I can actually keep the heading confined to one line, I am in a
much better position. I normally do manage to confine headings to a
single line, but I rather suspect the people wanting things changed will
want lots of lines of text.
Some ways to do vertical centering:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Choose some that fit your purpose...


After posting I had actually found that wonderful resource that you have
provided. It has provided some great ways of doing other center layouts.
Thank you very much for it.

However I couldn't figure how to precisely match the many ideas on your
page to what I wanted to do once I had eliminated using pixel
measurements and tables. I can do it with a table, but I really don't
want to get pushed into using a table for layout until I have nowhere
else to turn. If I could be sure of having a single line of header it
would be great. The line-height idea looks very handy if text doesn't
wrap. Plus some of the really nice ideas don't work with IE. Very
handy page. I will have a good play with your ideas and see what
happens. Thanks.

Of course, maybe I can talk them out of the idea that they want several
lines of heading. Maybe I can convince them that having the top of the
image and the top of the heading aligned would look more like the rest
of the page.

--
http://www.ericlindsay.com
Dec 3 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
2919
by: John Baker | last post by:
Hi: I have a user who has labels that are set up 3 across and 11 vertical (which is unusual at best), and he wants me to print names and addresses on them. I have already set up for labels 10 vertical and 3 across (Avery 5160)which are another standard the user has, but can't find any in the setup for labels that show 11 vertical. I am...
0
1633
by: GiladP1 | last post by:
Hi, I am trying to create a vertical label or a vertical text box by useing their 'Vertical' property. But the text just disapears. I can manage to get right-to-left text to be vertical but English letters don't work. I am using Access 2003 on Windows XP. I tried using 2k format or 2003 format and both didn't work. Can anybody help? Thanks
1
2632
by: James Dean | last post by:
Can you make vertical text in a richtextbox or is there any way around this like make the string vertical outside the textbox then try to paste it in that way into the textbox?.... *** Sent via Devdex http://www.devdex.com *** Don't just participate in USENET...get rewarded for it!
7
15625
by: bienwell | last post by:
Hi, I'm using the CheckBoxList control in ASP.NET for Web development. This checkboxlist is bound by the database. If we have more items for this checkbox list, it takes space on the page. I want to have vertical scroll bar (like CheckedListBox in Window development) to save space. Can we do that in ASP.NET ? Please give me your...
0
1107
by: DraguVaso | last post by:
Hi, I'm having a DataGrid on which I want to draw 2 moveable vertical lines. What should happen is: When I move a vertical line, I have somewhere an indication on which character in the datagrid it is put. So if I place a vertical line between the 10th and 11th character in the rows in my datagrid I want to have somewhere next to the...
5
10049
by: Rico | last post by:
I have label that I need to be vertical. The problem is that when I select "Vertical=yes" the label reads from top to bottom rather than bottom to top (which i need). Can this be done? Any help would be great. Thanks!
3
4595
by: Avi G | last post by:
Hi, i work with VS 2005 and i need to know how to put the windows time(Clock) on my label that it is on the form that i will see the full time include the second as they move, and i need to know how to make a label with text on him to vertical state and not the horizontal normal state. Thanks
2
2015
by: akm | last post by:
I am facing an issue with the vertical scroll bar. Actually i am using data grid to display the data in my tables, and also i am using the same view form to diplay the data for different tables. When i display the data in table1 it shows all the data with the vertical scroll bar but when i display Table1 again after displaying the Table2 which...
3
5150
by: Spiros Bousbouras | last post by:
The fact that vertical tab and form feed exist both in the basic source character set and the basic execution character set suggests to me that there is a class of display devices where vertical tab and form feed produce a predictable and consistent (among different devices) behaviour. So what are these devices and what is the behaviour ? ...
1
13717
by: Tom | last post by:
First, I posted a similar request for help in another group and now don't find the posting. Problem with my newsreader perhaps ... but apologies if this appears as a cross posting. My code is inconsistent in the detection of a vertical scrollbar. This involves situations when less than the client area is needed to hold the small amount of...
0
7590
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7347
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7688
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5271
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4895
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3391
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3391
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
968
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
636
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.