CODEWITHSUNDEEP
htmlformscsscss-tables
user2042436
user2042436

Reputation: 23

How to place a css button in center (horizontal) of four table columns

I have a home search form on frontpage of my website tjsoldit.com. 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 http://tjsoldit.com/wp-content/uploads/2013/02/4-columns.jpg .

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 display:inline;,display:table etc. But not able to do so. Please help.

The css class of search button is: .ds-quick-search-button, class of form fields is .ds-quick-search-name and class of field values is .ds-quick-search-name and more about the structure of form is can be read here: www.diversesolutions.com/design-tips/idx-quick-search-styling-guide-6744

NOTE: I am provided with just an embedding code. So cannot change html. I can just play with its css.

Upvotes: 2

Views: 11926

Answers (2)

Sowmya
Sowmya

Reputation: 26989

Add colspan="4" (merging of 4 cells) and align="center"

<tr>
<td colspan="4" align="center">
<input type="button" value="Search" class="ds-quick-search-button">
</td>
</tr>

OR

Create an outer div to your table and add the table style to the outer div, increase the padding values padding: 6px 24px 36px 24px;

and then try adding this

.ds-quick-search tr:last-child input{margin:2% 0 0 25%; position:absolute; }

DEMO 2

To give space between column 1 & 2 and between 3 & 4

.ds-quick-search td:first-child{padding-right:15px}
.ds-quick-search td:nth-child(3){padding-right:15px}

Upvotes: 3

Milind
Milind

Reputation: 457

Set marging of button 50%, like this:

.ds-quick-search-button { 
   margin-left:50%;
}

Upvotes: 0

Related Questions