Forums

Trying to align Submit Button in center for last two days. URL is http://flavinit.com/index.php?option=com_chronocontact&chronoformname=contactus Please help.

HTML

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Contact Us</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Phone:(281)673-0481              Fax:(832)460-3124 </span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">First Name</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="text_2" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Last Name</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Contact Number</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_5" name="text_5" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email Address</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_4" name="text_4" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Event Date</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_6" name="text_6" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Event Details</label>
    <textarea class="cf_inputbox" rows="8" id="text_8" title="" cols="30" name="text_8"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Comments</label>
    <textarea class="cf_inputbox" rows="10" id="text_9" title="" cols="30" name="text_9"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_9" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>
<style type='text/css'>div.chronoform {display:none;}</style>

CSS

@charset "utf-8";

/* CSS Document */



/*-----------Form Styles--------------*/



.form_item {


 /*border:1px #CCCCCC solid;*/

	height:auto;

}



.form_element {

	font-family:Arial, Helvetica, sans-serif;

	font-size:14px;

	float: left;

	margin-left:30px;

	margin-top:8px;

	margin-bottom:8px;

	width:85%;


   

}



.form_element label {

	/*width:150px;*/

	padding:0px 10px 0px 0px;

	display: block;

	float: left;

	line-height: 22px;

	vertical-align: middle;
   
   

}

.form_element .check_label {

	/*width:150px;*/

	padding:0px 10px 0px 0px;

	float:none;

	display:inline;

	line-height: 22px;

	vertical-align: middle;

}

.form_element .radio_label {

	/*width:150px;*/

	padding:0px 10px 0px 0px;

	float:none;

	display:inline;

	line-height: 22px;

	vertical-align: middle;

}



.form_element select, .form_element input {

	/*width:150px;*/

	font-family:Arial, Helvetica, sans-serif;

	font-size:14px;	

}



.cf_fileinput{

	width:auto!important;

}



.delete_icon { float:right; /*border-left:1px #CCCCCC solid; padding:10px;*/}



.delete_icon1 { float:right; border-left:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; padding:10px;}



.button { text-align:center; border:none; margin-top:10px; }



.no_delete { border:none;}



.cf_button1 {
       

	width:70px!important;

}

.radio { width:20px!important;}

.float_left { float:left;}

.cfclear { clear:both; font-size:0px; line-height:0px;}



/*.width1 { width:571px;}*/

Hi cricket99,

That URL is not accessible.
Try adding a style attrribute to the div wrapped around the button style='text-align:center'

Bob

Well, you could perhaps approach it another way. If your layout is fixed width, you could apply a left margin to your submit button to create the desired effect. You wouldn't really put a submit button within a <p> tag.