Discussion :

[speedsub59]

Bonjour.

Je viens de terminé une formation java et je fais un projet pour mon diplome et voila je ne suis pas doué en front.

J'ai fait une application REST API JAVA et la je m'attaque à la partie front avec angular mais j'ai un petit soucis pour la mise en page.

voici le reslutat que je souhaite obtenir c'est ma maquette :



Mais voila le résultat il m'est impossible de centrer le texte dans mes <div>.



si une âme charitable pourrait me dire ou je fais erreur...

voici mon code coté html il s'agit d'une liste

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h3>Vos véhicules :</h3>
<ul  class="list-group">
  <li class="list-group-item"
      [class.active]="selectedVehicule.id == vehicule.id"
      (click)="setSelectedVehicule($event, vehicule)"
      *ngFor="let vehicule of vehicules">
    <div id="div_list">
      <div class="div_nom_vehicule">{{vehicule.nom}}</div>
      <div class="div_marque_model">{{vehicule.marque}} {{vehicule.model}}</div>
      <div class="div_bouton">
        <button (click)="ajoutPlein($event, vehicule)">
          Plein
        </button>
        <button (click)="ajoutEntretien($event, vehicule)">
          Entretien
        </button>
        <button
          (click)="suppressionVehicule($event, vehicule)">
          Supprimer
        </button>
      </div>
    </div>
  </li>
 
</ul>

et la partie css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#div_list{
  background-color: #1E5E99;
  height: 50px;
  width: 500px;
  text-align: center;
  margin: auto;
  margin-top: 5px;
}
 
.div_nom_vehicule{
  width: 150px;
  height: 50px;
  float: left;
  font-family: "Roboto Light";
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  display: inline;
  background-color: white;
}
.div_marque_model{
  color: white;
  font-weight: bold;
  height: 50px;
  width: 150px;
  font-family: "Roboto Light";
  display: inline;
 
}
.div_bouton{
  float: right;
  height: 50px;
  width: 200px;
  display: inline;
}

J'avais essayé de mettre vertical-align : center mais ca ne change rien
j'ai test de mettre des margin auto mais rien ne change.

Et il faudra que je rajoute des div pour les info du véhicule.

Il faudrait que je m'améliore en front même si ce n'est pas la partie qui est en rapport avec ma formation j'aimerais arriver à avoir des beaux visuel.

Ou alors des le départ je ne doit pas organiser mes div comme cela?

Merci beaucoup!!!

[NoSmoking]

Bonjour,
met un display:inline-flex sur ton élément <div id="div_list">, il y aura sûrement des ajustements à faire.