Centrer un élément dans un autre

Version imprimable

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:

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:

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

18/03/2017, 21h00
Invité

Bonjour,

Un code CSS doit toujours être accompagné du code HTML associé.
19/03/2017, 12h05
Pi RD

oui pardon, c'est corrigé .
20/03/2017, 11h43
friendofweb

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,
20/03/2017, 16h01
Pi RD

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.

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

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
 
.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:

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>

Bonjour,

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

Code:

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:

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;
}

21/03/2017, 23h19
Pi RD

Super merci ça marche