Centrer un élément dans un autre

**Pi RD** · 18/03/2017, 18h04

Bonjour,
J'aimerai faire un player de musique et pour cela j'aimerai mettre un bouton play sur la pochette de la musique.
Comment faire pour que ce bouton soit en centre de la pochette sachant que ma pochette est en responsive ?
Voici le code.

Code html :

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

1
2
3
4
5
6
7
<div class="img-shadow">
	<img src="/img/abc.png" alt="Pochette d'album" title="Pochette d'album" class="cover">
	<button type="button" class="fast play" title="Play/Pause" id="playbtn">
			<span class="fa fa-3x fa-play off"></span>
			<span class="fa fa-3x fa-pause on"></span>
	</button>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
.cover{
	background-color: #fff;
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.54);
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.54);
	left: 26%;
	position: absolute;
	top: 22%;
	width: 22%;
}

Merci d'avance

Invité · 18/03/2017, 21h00

Bonjour,

Un code CSS doit toujours être accompagné du code HTML associé.

**Pi RD** · 19/03/2017, 12h05

oui pardon, c'est corrigé .

**friendofweb** · 20/03/2017, 11h43

Bonjour,

Je propose que tu donnes les dimensions de l'image ou la partager, pour qu'on puisse tester ton code en local.
Perso, je dois partir cette après-midi. Mais si je peux t'aider, pourquoi pas..

Cordialement,

**Pi RD** · 20/03/2017, 16h01

Bonjour,
Merci pour votre réponse, le truc c'est que les images changent, les dimensions aussi. Je ne peux pas te donner de dimensions.

**Muchos** · 20/03/2017, 16h24

Je propose cela (dans les deux cas, les images d'origine n'ont pas les mêmes dimensions).

Code css :

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
 
.songCover {
  margin: 1em 0;
  border: medium solid #333;
  width: 16em;
  height: 16em;
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
}
.songTitle {
  margin-top: 1em;
  font-size: 1em;
  background: white;
}
.songControls {
  position: relative;
  top: 5em; /* fait 7em avec le titre */
  width: inherit;
  height: 2em;
  text-align: center;
}
.songControls span {
  display: none;
}
.songControlsPlay::before {
  content: ">";
}
.songControlsPause::before {
  content: "ii";
}

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
 
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Ma musique</title>
</head>
<body>
 
  <!-- Avec deux boutons -->
  <section class="songCover"
    style="background-image: url(https://upload.wikimedia.org/wikipedia/en/e/e3/Queen_The_Miracle.png)">
    <h2 class="songTitle">Queen - The Miracle</h2>
    <p class="songControls">
      <button type="button" class="songControlsPlay" id="playbtn" title="play"><span>play</span></button>
      <button type="button" class="songControlsPause" id="pausebtn" title="pause"><span>pause</span></button>
    </p>
  </section>
 
  <!-- Avec player navigateur -->
  <section class="songCover"
    style="background-image: url(https://upload.wikimedia.org/wikipedia/en/thumb/b/b7/NirvanaNevermindalbumcover.jpg/220px-NirvanaNevermindalbumcover.jpg)">
    <h2 class="songTitle">Nirvana - Nevermind</h2>
    <audio class="songControls" controls
      src="/album/nirvana/nevermind/track1.ogg">
      Mettez à jour votre navigateur pour écouter !
    </audio>
  </section>
 
</body>
</html>

Invité · 21/03/2017, 09h27

Bonjour,

http://codepen.io/jreaux62/pen/BWYeqe

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
 
<div class="cover">
  <img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Queen_The_Miracle.png" alt="Pochette d'album" title="Pochette d'album">
  <div>
    <button type="button" class="fast play" title="Play/Pause" id="playbtn">
			<span class="fa fa-3x fa-play off"></span>
			<span class="fa fa-3x fa-pause on"></span>
	</button>
  </div>
</div>

Code css :

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
.cover {
  position: relative;
  display: inline-block;
  background-color: #fff;
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.54);
 
  width:24%; margin:0.5%; float:left;
}
 
.cover > img {
  display: block;
  width:100%;
}
 
.cover > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.cover > div button {
  background: transparent;
  border: 0;
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.54);
  color: #fff;
  cursor: pointer;
}

**Pi RD** · 21/03/2017, 23h19

Super merci ça marche

Centrer un élément dans un autre

Centrer un élément en CSS

Discussions similaires

Partager

Partager