2 pièce(s) jointe(s)
Mise en page avec css sur une application angular
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 :
Pièce jointe 590247
Mais voila le résultat il m'est impossible de centrer le texte dans mes <div>.
Pièce jointe 590248
si une âme charitable pourrait me dire ou je fais erreur...
voici mon code coté html il s'agit d'une liste
Code:
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:
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!!!
