How Can I center this form inside my Footer using CSS?

Question

I have a stacked list and a form inside my footer and i want the list to be floated left and I want the Form to be in the center of the page how can I do this inside my css file?

 footer a { margin-left: 100px; margin-bottom: 18px; display: block; } form { float: center; }

 <footer> <a href="#">Home</a> <a href="#">Where To stay</a> <a href="#">Transportation</a> <a href="#">Island Activities</a> <a href="#">FAQ</a> <form> Email Newsletter: <br> <input type="text" name="Email" Value=""> <br> <input type="submit" value="Sign Up"> </form> </footer>

Answer 1

I think you can try this way. Hope this works for you.

 .footer-list { margin-bottom: 18px; width: 35%; float: left; }.footer-form { width: 65%; margin-left: 15%; } li { list-style: none; } form { padding: 10px; }

 <footer> <div class="footer-list"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Where To stay</a></li> <li><a href="#">Transportation</a></li> <li><a href="#">Island Activities</a></li> <li><a href="#">FAQ</a></li> </ul> </div> <div class="footer-form"> <form> Email Newsletter: <br> <input type="text" name="Email" Value=""> <br> <input type="submit" value="Sign Up"> </form> </div> </footer>

Answer 2

first, you should put the list inside another div:

<footer>
<div class="list">
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>
</div>

<form>
 Email Newsletter:
 <br>
 <input type="text" name="Email" Value="">
 <br>
 <input type="submit" value="Sign Up">
 </form>
</footer>

then make the width of the footer 100%:

footer { width: 100%; }

then position them:

.list { display: inline-block;
        float:left;}
form {margin:0 auto;}

Answer 3

There is a CSS property called text-align . You could be using this to align text to the center of a page.

Try to add the following code to your snippet text-align: center; . In order to make the form appear in-line with the list, I think the best way in order to achieve this you could be using flexbox . Try to add display: flex; to your footer:

 footer a { /*margin-left: 100px; /*<-- When using flexbox and using justify-content, you might not be needing this*/ margin-bottom: 18px; display: block; } form#center { text-align: center; } footer#flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; }

 <footer id="flex"> <div> <a href="#">Home</a> <a href="#">Where To stay</a> <a href="#">Transportation</a> <a href="#">Island Activities</a> <a href="#">FAQ</a> </div> <form id="center"> Email Newsletter: <br> <input type="text" name="Email" Value=""> <br> <input type="submit" value="Sign Up"> </form> </footer>

There are many other different methods to center elements as well (such as the margin-left: auto; + margin-right: auto; technique):

 footer a { margin-left: 100px; margin-bottom: 18px; display: block; } form#center { display: block; margin-left: auto; margin-right: auto; width: 175px; /*<-- requires a fixed width though*/ }

 <footer> <a href="#">Home</a> <a href="#">Where To stay</a> <a href="#">Transportation</a> <a href="#">Island Activities</a> <a href="#">FAQ</a> <form id="center"> Email Newsletter: <br> <input type="text" name="Email" Value=""> <br> <input type="submit" value="Sign Up"> </form> </footer>

Answer 4

Try below code

 /* Try this*/ footer{ text-align:center; border: 1px solid #80808017; }

 <footer> <a href="#">Home</a> <a href="#">Where To stay</a> <a href="#">Transportation</a> <a href="#">Island Activities</a> <a href="#">FAQ</a> <form> Email Newsletter: <br> <input type="text" name="Email" Value=""> <br> <input type="submit" value="Sign Up"> </form> </footer>