Bonjour à tous,

Je viens vers vous car je n'arrive pas à centrer au milieu des inputs et un select, cela sûrement être simple mais je n'y arrive pas. Avec mon code, il est au milieu mais en haut, pas au milieu.

Voici mon HTML:

        <div class="reservation">
            <div class="input-container">
                <i class="fa fa-clock-o icon"></i>
                <input class="input-field" type="date" placeholder="Date:" name="date">
              </div>
            
              <div class="input-container">
                <i class="fa fa-calendar icon"></i>
                <input class="input-field" type="time" placeholder="Time:" name="time">
              </div>
            
              <div class="input-container">
                <i class="fa fa-user icon"></i>
                <select name="person">
                    <option value="">1 person</option>
                    <option value="">2 person</option>
                </select>
              </div>
            <div class="reserve">
                <a href="#">Reservation</a>
            </div>
        </div>

Et mon CSS:

.reservation {
    background-color: white;
    display: flex;
    color: black;
    justify-content: space-between;
    text-align: center;
    width: 50%;
    padding-left: 20px;
    margin: auto;
    height: 80px;
    vertical-align: middle;
}

.reserve {
    min-width: 200px;
    height: 100%;
    align-items: center;
    display: inline-flex;
    background-color: crimson;

}

.reserve a {
    color: black;
    margin-left: auto;
    margin-right: auto;
}

.input-container {
    display: flex;
    justify-content: center;
    vertical-align: middle;
}

Si vous voulez plus de précision n'hésitez pas sinon j'espère que vous pourrez m'aider.

Bonjour,

C'est ce résultat que tu veux?

Si oui, je t'expliquerai le code demain, il commence à se faire tard

<div class="container">
  <div class="reservation">
      <div class="input-container">
          <i class="fa fa-clock-o icon"></i>
          <input class="input-field" type="date" placeholder="Date:" name="date">
        </div>

        <div class="input-container">
          <i class="fa fa-calendar icon"></i>
          <input class="input-field" type="time" placeholder="Time:" name="time">
        </div>

        <div class="input-container">
          <i class="fa fa-user icon"></i>
          <select name="person">
              <option value="">1 person</option>
              <option value="">2 person</option>
          </select>
        </div>
      <div class="reserve">
          <a href="#">Reservation</a>
      </div>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 100vh;
}

.reservation {
  display: flex;
  justify-content: space-between;
  align-items: center;
 
 
  width: 50%;
  height: 80px;
  
  background-color: white;
  color: black;
}
 
.reserve {
    min-width: 200px;
    height: 100%;
    align-items: center;
    display: flex;
    background-color: crimson;
    justify-content: center;
}
 
.reserve a {
    color: black;
}

Désolé du retard @eclairia, petit problème de connexion mais ton code correspond à ce que je veux mais je comprends pas pourquoi le <select> est surelevée par rapport aux autres éléments <input> ?

Un petit up ?

Personne pourrez me dire pourquoi le <select> est surelevée par rapport aux autres éléments <input> ? Et comment régler le problème ?

Excuse moi je t'ai complètement oublié.

La différence de taille est lié aux input time et date que tu utilises.

Cette différence s'explique par les icônes rajoutées par le navigateur.

Du coup, comme l'icône est plus grande que la hauteur de l'input, l'input s'agrandit et créer donc un décalage avec les autres éléments.

Si tu passes tes input date et time en text tu n'as plus le problème.

Pour régler le soucis avec ces types d'input tu dois appliquer une hauteur minimales aux inputs:

Le bout de code ci-dessous provient de ce topic Stack overflow:

https://stackoverflow.com/questions/52703412/how-to-fix-inconsistent-height-of-html5-input-boxes

input, select {
  border: 1px solid black;
  padding: 0.5rem;
  min-height: 1.5em;
  box-sizing: content-box;
}

-
Edité par eclairia 6 juillet 2020 à 23:33:47

D'accord merci beaucoup j'ai compris.

Bonne journée à toi.

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e