How does the horizontal alignment button send?

Question

How does the horizontal alignment button send?

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

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

 
</div>

+3

html css

TriggeredNope 01 Aug 17 at 6:49 am

source to share

3 answers

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 code Hide result

+1

Jishnu VS 01 Aug 17 at 6:56

source to share

you can use center tag

<center>
<input type="button" value="search"/>
</center>

Run code Hide result

0

Tomer Wolberg 01 Aug 17 at 7:07

source to share

Frits · Accepted Answer · 2017-08-01T06:58:03+0000

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 code Hide 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 code Hide result

How does the horizontal alignment button send?

More articles: