Display text fields at center of the page - html

Question

We have form page like this:
We wanted to make design like this:
Means:
Name & email and their text field should display as like above image.
Message & its box should display like comment section.
Same result need for Name & email present below.
Need space between 2 button present in bottom.
css
media only screen and (min-width: 1224px)
.send-friend h2 {
text-align: center;
}
#media only screen and (min-width: 1224px)
form .legend {
border: none;
color: #000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
line-height: 1.4;
margin: 0 0 15px;
padding-bottom: 7px;
text-rendering: optimizespeed;
text-transform: uppercase;
}
}
html
<div class="send-friend">
<?php
echo $this->getMessagesBlock()->toHtml();
?>
<div class="page-title">
<h1><?php
echo $this->__('Email to a Friend');
?></h1>
</div>
<form action="<?php
echo $this->getSendUrl();
?>" method="post" id="product_sendtofriend_form">
<div class="fieldset">
<?php
echo $this->getBlockHtml('formkey');
?>
<h2 class="legend"><?php
echo $this->__('Sender Details');
?></h2>
<ul class="form-list" id="sender_options">
<li class="fields">
<div class="field">
<label for="sender_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="sender[name]" value="<?php
echo $this->escapeHtml($this->getUserName());
?>" title="<?php
echo $this->quoteEscape($this->__('Name'));
?>" id="sender_name" type="text" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="sender_email" class="required"><em>*</em><?php
echo $this->__('Email:');
?></label>
<div class="input-box">
<input name="sender[email]" value="<?php
echo $this->escapeHtml($this->getEmail());
?>" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="sender_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
<li class="wide">
<label for="sender_message" class="required"><em>*</em><?php
echo $this->__('Message:');
?></label>
<div class="input-box">
<textarea name="sender[message]" class="input-text required-entry" id="sender_message" cols="3" rows="3"><?php
echo $this->escapeHtml($this->getMessage());
?></textarea>
</div>
</li>
</ul>
</div>
<div class="fieldset">
<h2 class="legend"><?php
echo $this->__('Recipient Details');
?></h2>
<ul class="form-list" id="recipients_options">
<li class="fields">
<div class="field">
<label for="recipients_name" class="required"><em>*</em><?php
echo $this->__('Name:');
?></label>
<div class="input-box">
<input name="recipients[name][]" type="text" class="input-text required-entry" id="recipients_name" />
</div>
</div>
<div class="field">
<label for="recipients_email" class="required"><em>*</em><?php
echo $this->__('Email Address:');
?></label>
<div class="input-box">
<input name="recipients[email][]" value="" title="<?php
echo $this->quoteEscape($this->__('Email Address'));
?>" id="recipients_email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" class="input-text required-entry validate-email" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="back-link"><a href="#" onclick="history.back(); return false;"><small>« </small><?php
echo $this->__('Back');
?></a></p>
<button type="submit" class="button<?php
if (!$this->canSend()):
?> disabled<?php
endif;
?>"<?php
if (!$this->canSend()):
?> disabled="disabled"<?php
endif;
?>><span><span><?php
echo $this->__('Send Email');
?></span></span></button>
<div id="max_recipient_message" style="display:none;">
<?php
if ($this->getMaxRecipients()):
?>
<p class="limit"><?php
echo $this->__('Maximum %d email addresses allowed.', $this->getMaxRecipients());
?></p>
<?php
endif;
?>
</div>
<?php
if (1 < $this->getMaxRecipients()):
?>
<p id="add_recipient_button">
<button type="button" onclick="add_recipient();" class="button"><span><span><?php
echo $this->__('Add Recipient');
?></span></span></button>
</p>
<?php
endif;
?>
</form>
</div>

Answer 1

Maybe you could try to put the form in a <div> and then increase the width of the input boxes.
Do put padding to leave some white space for aesthetic purpose :)
Example <input type="text" id="text" name="text_name" style="width: 300px;" />
(if you are not considering responsiveness)
I would prefer if you use .text{max-width:110%;}
Since you are new to CSS, the previous CSS shown can be used for multiple ids by putting a comma and the respective tags you would like the following css to apply.
Then for the words indicating which textbox is what, you could use a text-align:left

Answer 2

You can use bootstrap class text-center to set alignment in center position.