HOW TO VERTICLY ALIGN AN OBJECT

Anurag Sharma

Total Post:40

Points:280
Posted by  Anurag Sharma
C#  ASP.Net 
 918  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.

      Modified On Apr-09-2018 11:39:55 PM

Answer

NEWSLETTER

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