Solved

Vertical alignment of multiple elements compatible with many browsers?

Posted on 2007-11-15
6
457 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now