Solved

Vertical alignment of multiple elements compatible with many browsers?

Posted on 2007-11-15
6
460 Views
Last Modified: 2008-02-01
I have three things I'd like to align vertically, but not using tables. Just using css.  Is there a workaround/hack/solution that is compatible with the major browsers (and versions)?  

<h1>This is a title</h1>
<input type="text" name="" value="a text box">
<input type="image" src="sample.gif" name="">

The text box is a bit larger than the <h1> element, and the image, is a bit larger than the textbox, thus, the desire to have them all vertically aligned in the middle of a div that has a height of 100px.  

Help?
0
Comment
Question by:n00b0101
  • 4
  • 2
6 Comments
 
LVL 14

Expert Comment

by:cezarF
ID: 20295789
try this...

<div style="height:100px;border:1px solid;">
<h1 style="vertical-align: middle;">This is a title</h1>
<input type="text" name="" value="a text box" style="vertical-align: middle;">
<input type="image" src="sample.gif" name="" style="vertical-align: middle;">
</div>



0
 

Author Comment

by:n00b0101
ID: 20295851
doesn't work in ie.... that's okay though.  i wound up create 3 separate divs and using float: left for each, but, if there's a better solution, i'm all ears.
0
 
LVL 14

Expert Comment

by:cezarF
ID: 20295879
are you referring to the title not being in the same line as the text box and image?

I used ie to test and its ok.  
0
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 14

Accepted Solution

by:
cezarF earned 500 total points
ID: 20296026
this one worked but had to remove <h1>


<div style="display: table; height: 100px;  #position: relative; overflow: hidden; border:1px solid">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div style=" #position: relative; #top: -50%;">
		This is a title
		<input type="text" name="" value="a text box" style="vertical-align: middle;">
		<input type="image" src="sample.gif" name="" style="vertical-align: middle;">
      </div>
    </div>
  </div>

Open in new window

0
 

Author Comment

by:n00b0101
ID: 20296235
what version of ie?  ie7 is okay, but >7, not working for me.  :/
0
 
LVL 14

Expert Comment

by:cezarF
ID: 20296449
ie 6 and ff 2
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question