Clever Geek Handbook

How does the horizontal alignment button send?

How do I get this search button to align horizontally horizontally?

It looks like this:> </a> </p> <pre> <code> input.search {width: 7em; height: 3em; float: right; padding-right: 10px; background-color: # 777777; } </code> <br> <script async src=

" data-src="/img/2febe64536ba20fef0d126d2436618d6.png" class=" lazyloaded" src="https://fooobar.com//img/2febe64536ba20fef0d126d2436618d6.png">

+3


source to share


3 answers


The inputs are styled by default display:inline;

, which means the parent must have the text-align:center;

following:

.parent {
  background-color: #404040;
  text-align: center;
  padding: 5px;
}
      

        
        
        
      

    
<div class="parent">
  <input type="submit" class="submit" value="Submit">
</div>
Run codeHide result




Or alternatively, you can change the display type of the button / input to display:block;

and use automatic fields like this:

.parent {
  background-color: #404040;
  padding: 5px;
}
.submit {
  display:block;
  width: 100px; /* note that display block will go full width unless you specify otherwise */
  text-align:center;
  margin: auto;
}
      

        
        
        
      

    
<div class="parent">
  <input type="submit" class="submit" value="Submit">
</div>
Run codeHide result


+1


source


This is what you need?



.full-width {
  text-align:center;
  width:100%;
  float:left;
  background:#404040;
  padding:5px;
}
      

        
        
        
      

    
<div class="full-width">
  <input type="button" value="search" />
</div>
Run codeHide result


+1


source


you can use center tag

<center>
<input type="button" value="search"/>
</center>
Run codeHide result


0


source






More articles:


All Articles