keeping table elements vertically centered

Posted on 2004-11-16
Last Modified: 2012-05-05
This is naturally centered in most browsers, but in safari it top aligns within table

        <div align="left"> &nbsp;&nbsp;
          <input type="text" align="absmiddle" name="search" value="<?php echo str_replace("+"," ",$search); ?>" style='width:130px' maxlength="255">
          <input name="submit" type="submit"  align="absmiddle" style=";text-align:center"    onClick="this.form.keywords.value =; this.form.action = '';" value="health">

I have tried a few things like <td valign="middle"...> but no joy...
Question by:macuser777
    LVL 22

    Expert Comment

    Hi macuser777,
    safari works differently.
    If you can not make it middle then you can try <table vspace="somenumber">

    LVL 8

    Accepted Solution

    Perhaps the DIV is messing it up.  Safari may render the height differently perhaps?  Some ideas...

    <div align="left" style="vertical-align: middle">
    <div align="left" valign="middle">

    Try <div align="left" style="border: 1px solid red"> to see how the DIV is rendering in each browser.  Perhaps that will shed some light.
    LVL 4

    Author Comment

    Found the problem.

    hendrim led me to it...but it wasn't the divs. I started taking things out 1 by 1 [starting with the div] and it was misalligning because there was a

    <form method="get">
    LVL 4

    Author Comment

    [cut me off again...safari problem!]


    LVL 4

    Author Comment

    lol... oh boy... let's try again...

    [cut me off again...safari problem!]


    LVL 4

    Author Comment

    ach! - I reported this problem about a year ago....and </form> within the table. It's fine in all my browsers now :) vspace didn't work ...sent all contents lower... but it's nice to learn a new tag too.   Thanks,  macuser

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    Suggested Solutions

    Preface In the first article: A Better Website Login System ( I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    746 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

    20 Experts available now in Live!

    Get 1:1 Help Now