Center Buttons on PC and on phone - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button layout

Description

Center Buttons on PC and on phone

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

*{margin:0px;
padding:0px;
}
#menu {<!--from  ww  w  .  j  ava  2  s . c  o  m-->
   height:38px;
   padding-top:0px;
   background-color:white;
   text-align: center;
}
.photo {
   position:relative;
   font-family:arial;
   overflow:hidden;
   border:0px;
   width:811px;
   height:98px;
   margin-left:250px;
}
.photo .heading, .photo .caption {
   position:absolute;
   background:#000;
   height:50px;
   width:816px;
   opacity:0.6;
}
.photo .heading {
   top:-50px;
}
.photo .caption {
   bottom:-42px;
   left:3px;
}
.photo .heading span {
   color:#26c3e5;
   top:-50px;
   font-weight:bold;
   display:block;
   padding:5px 0 0 10px;
}
.photo .caption span{
   color:#FF0;
   font-size:16px;
   display:block;
   padding:5px 10px 0 10px;
}
.footer {
   font-family: Calibri;
   font-size: 18px;
   color: #000;
}
head {
   text-align: center;
}
menu1 {
   text-align: center;
}
.footer a {
   text-align: center;
}
.menuhead {
   font-family: Calibri;
}
.menuhead {
   font-size: 24px;
}
.menuhead {
   font-size: 18px;
}
.footer1 {
   text-align: left;
   font-size: 18px;
   color: #000;
}


      </style> 
 </head> 
 <body> 
  <div id="menu"> 
   <ul id="MenuBar1" class="MenuBarHorizontal"> 
    <li> <a href="">Books</a> </li> 
    <li> <a href="">Add Url</a> </li> 
    <li> <a href="#">About Us</a> </li> 
    <li> <a href="#">Contact Us</a> </li> 
   </ul> 
  </div> 
  <p></p> 
  <center> 
   <p class="menuhead"> <br> </p> 
   <br> 
  </center> 
  <center> 
   <p class="footer1">&nbsp;</p> 
   <p class="footer1">&nbsp;</p> 
   <p class="footer1">&nbsp;</p> 
   <p class="footer1">&nbsp;</p> 
   <p class="footer1">&nbsp;</p> 
   <img src="https://www.java2s.com/style/demo/Safari.png" width="817" height="110"> 
  </center> 
  <form action="/search/search.php" method="GET"> 
   <center> 
    <p> <br> </p> 
    <p>&nbsp;</p> 
    <p> <input name="search" type="text" class="footer1" size="50"> </p> 
    <p>&nbsp;</p> 
   </center> 
   <p class="footer1"></p> 
   <center> 
    <input name="submit" type="submit" class="footer1" value="Search Now"> 
   </center> 
   <p></p> 
  </form> 
  <p class="footer1">&nbsp;</p> 
  <p class="footer1">&nbsp;</p> 
  <p class="footer1">&nbsp;</p> 
  <p class="footer1">&nbsp;</p> 
  <p class="footer1">&nbsp;</p> 
  <p class="footer1"> </p> 
  <p class="footer1"> </p> 
  <p class="footer1"> </p> 
  <center> 
  </center>  
 </body>
</html>

Related Tutorials