title: How to place a css button in center (horizontal) of four table columns
body: <p>I have a home search form on frontpage of my website <a href="http://tjsoldit.com" rel="nofollow">tjsoldit.com</a>. The form is not coded by me, it is provided by my home search real estate company and I embedded it by inserting the two line script calling the form. I can only set some custom css rules for form in my custom css sheet as I am provided with css classes of the different elements of the form. The form is  is rendered in a table with rows for all the search fields and their matching labels. The structure of the form can be seen here <a href="http://tjsoldit.com/wp-content/uploads/2013/02/4-columns.jpg" rel="nofollow">http://tjsoldit.com/wp-content/uploads/2013/02/4-columns.jpg</a> .</p>
  
  <p>As you can see in the structure, the button is an element of first column of the form. All I want is to center the button so that the button will come in the horizontal center of its line (almost half under column 2 and half under column 3). I have tried all display properties like <code>display:inline;</code>,<code>display:table</code> etc. But not able to do so. Please help.</p>
  
  <p>The css class of search button is: <code>.ds-quick-search-button</code>, class of form fields is <code>.ds-quick-search-name</code> and class of field values is <code>.ds-quick-search-name</code> and more about the structure of form is can be read here: www.diversesolutions.com/design-tips/idx-quick-search-styling-guide-6744</p>
  
  <p>NOTE: I am provided with just an embedding code. So cannot change html. I can just play with its css.</p>