Mike Mike - 1 year ago 66
CSS Question

How do I keep my input fields on one line while centering the DIV that contains them?

I gave this CSS class to some input fields

.searchField {
display: inline-block;

This is their underlying HTML ...

<div id="searchForm">
Search For Results<br>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
<input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form> </div>

However, despite the fact that there is enough horizontal screen real estate, one of them keeps wrapping to teh next line, as this Fiddle illustrates -- https://jsfiddle.net/3mwn14fk/ . How do I keep these items on one line (assuming there is enough browser width)? Note I also want to keep the DIV they are within vertically and horizontally centered.

Edit: This is what I see in the Fiddle. This is on Firefox. Note the text fields are not on one line.

What I see in my Fiddle

Answer Source

use table and table -cell instead inline-block

  #loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: table;
    position: absolute;
    top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
 .searchField {
     display: table-cell;


it works have a look jsfiddle.net/UserIsMonica/3mwn14fk/1