HOW TO VERTICLY ALIGN AN OBJECT

Anurag Sharma

Total Post:40

Points:280
Posted by  Anurag Sharma
C#  ASP.Net 
 780  View(s)
Ratings:
Rate this:

I'm using a table which contains an H3 inside. Inside that H3 there is a google search bar. Now the google search bar is alligned at the top of the H3. How can I vertically allign it so it's centered? This is what I have at the moment:

<table>

  <tr>

<td id="Vak1.3"><h3>

                        <script type="">

                                                    (function () {

                                                        var cx = '013446364428343597193:qtxsarco2zs';

                                                        var gcse = document.createElement('script');

                                                        gcse.type = 'text/javascript';

                                                        gcse.async = true;

                                                        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

                                '//www.google.com/cse/cse.js?cx=' + cx;

                                                        var s = document.getElementsByTagName('script')[0];

                                                        s.parentNode.insertBefore(gcse, s);

                                                    })();

                        </script>

                        <gcse:search></gcse:search>

        </h3></td>

    </tr>

  </table>

  1. Pooja Malohtra

    Post:47

    Points:331
    Re: How to verticly align an object

    Generally spoken, its no longer a good practice to design a website with a table. This doesn't mean that tables are bad in general. That said you could put your searchbar into a div:

    <div id="container">your searchbar here..</div>

    That div can be vertically (and horizontally) aligned easily with:

    #container {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;   

    }

    If you want to have only vertical alignment you can change:

    margin-top: auto;

    margin-bottom: auto;

    But be patient that position: absolute is always related to the next parent element, which got the position element.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!