Image en bas de la page

**jm41320** · 12/02/2021, 02h24

bonjour,
j'ai créé un site sur la première photo le bouton par ici est en bas de l'image je n'arrive pas à le mettre au milieu
voila le css du bouton

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.button-1{
    display:block;
    width: 120px;
    height: 50px;
    background: #ff7a00;
    color:#fff;
    font-size=20px;
    margin: 100px auto;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;

je met le site complet
index.html

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Crete+round' rel="stylesheet">
    <title>Travel agency</title>
 
 
 
 
</head>
 
 
<body>
    <header>
        <div class="wrapper"></div>
        <h1>Travel Agency<span class="orange">.</span></h1>
        <nav>
            <ul>
                <li><a href="#main-image">Acceuil</a></li>
                <li><a href="#steps">Destination</a></li>
                <li><a href="#possibilities">Circuits</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
 
 
        </nav>
    </header>
 
    <section id="main-image">
        <div class="wrapper"></div>
        <h2>Organizer votre <br><strong>voyage sur mesure </strong></h2>
            <a href="#" class="button-1">Par ici</a>
    </section>
 
    <section id="steps">
        <div class="wrapper"></div>
        <ul>
            <li id="step-1">
            <h4>Planifier</h4>
                <p>Confiez-nous vos rêves d'évasion : en famille ou entre amis, nous trouverons la formule qui comblera vos attentes.
            <li id="step-2">
                <h4>Organisez</h4>
               <p> Bénéficiez de l'expertise de nos spécialistes de chaque destination, ils vous accompagnent dans la réalisation de votre voyage.</p>
                    </li>
             <li id="step-3">
                <h4>Voyager</h4>              
                <p>Nous nous chargeons d'assurer votre sécurité et de veiller à votre pleine sérénité tout au long de votre voyage.</p>
            </li>   
            <div class="clear"></div>
 
 
 
        </ul>   
    </section>
 
    <section id="possibilities">
        <div class="wrapper">
    <article style="background-image:url(images/article-image-1.jpg);">
 
 
            <div class="overlay">
            <h4>Parter en famille</h4>
            <p><small>Offrez le meilleur à ceux que vous aimez et partagez des moments fabuleux !</small></p>
            <a href="h" class="button-2">Plus d'info</a>
 
            </div>
            </article>
 
 
          <article style="background-image: url(images/article-image-2.jpg);">
               <div class="overlay">
 
            <h4>Envie de s'évader</h4>
            <p><small>Parfois un peu d'évasion serait le bienvenue et ferait le plus grand bien !</small></p>
             <a href="h" class="button-2">Plus d'info</a>  
                   </div>
               </article>
                <div class="clear"></div>
        </div>
 
 
 
 
 
 
 
    </section>
    <section id="contact">
        <div class="wrapper"></div>
    </section>
    <footer>
 
    </footer>
 
 
</body>
</html>

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
*{
    margin:0;
    padding:0;
}
body{
    font-family: arial,sans-serif;
    font-size: 15px;
}
h1{
    font-family: 'Crete Round',serif;
    font-size: 45px;
    color:#444;
}
h2{
    color:#444;
    font-size: 55px;
}
h4{
font-size: 24px;
 
}
p{
 line-height: 20px;
 color:#777;
}
.clear{
    clear:both;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color:#444;
}
.wrapper{
    width: 940px;
    margin:0 auto;
    padding:0 10px;
}
.orange{
    color:#ff7a00;
}
.clear{
    clear:both;
}
header{
    height: 120px;
}
small{
    font-size: 13px;
    font-style: italic;
}
header h1{
    float:left;
    margin-top: 32px;
}
header nav{
    float:right;
    margin-top: 50px;
}
header nav ul li{
    float:left;
    display: inline-block;
}
header nav ul li a{
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 20px;
}
 
 
 
 
/*main-image*/
#main-image{
  height=680px;
 
  background: url('images/main.jpg') center; 
 
}
 
 
#main-image h2{
    font-weight: normal;
    text-transform: uppercase;
    text-align:center;
    padding: 150px 0 40px 0;
   margin-bottom: 20px;
 
}
.button-1{
    display:block;
    width: 120px;
    height: 50px;
    background: #ff7a00;
    color:#fff;
    font-size=20px;
    margin: 100px auto;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
 
 
 
}
.button-1:hover{
    background: #02d8dd;
}
/*steps*/
#steps ul{
  margin: 80px 0;  
}
 
#steps ul li{
 width: 300px;
 float: left;
    padding-top: 140px;
    text-align: center;
    margin-right: 1px;
}
#steps h4{
    text-transform: uppercase;
    margin-bottom: 20px;
}
#steps p{
   margin-bottom: 20px; 
}
#step-1{
 background: url('images/steps-icon-1.png') no-repeat top center;   
}
#step-2{
  background: url('images/steps-icon-2.png') no-repeat top center;   
}
#step-3{
   background: url('images/steps-icon-3.png') no-repeat top center;  
}
/*possibilities*/
#possibilities{
    background-color: #efefef;
    padding: 60px 0;
}
#possibilities article{
    width: 460px;
    height:270px;
    float:left;
    border-radius: 10px;
}
#possibilities article:first-child{
    margin-right: 20px;
}
.overlay{
    background: rgba(255,255,255,0.95);
    height:100%;
    width: 190px;
    padding: 20px;
    border-radius: 10px 0 0 10px;
    text-align: center;
}
article h4{
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}
#possibilities p{
    text-align: center;
    margin-bottom: 20px;
}
.button-2{
    color:#fff;
    background-color: #ff7a00;
    padding: 9px 20px;
    border-radius: 3px;
}
.button-2:hover{
    color:#fff;
    background-color: #02b8dd;
   }

merci

**mathieu** · 12/02/2021, 10h25

il y a plusieurs images et boutons dans votre code, vous parlez desquels ?

pour ceux qui veulent tester le code, je l'ai mis là :
https://codesandbox.io/s/intelligent...src/styles.css