Afspeeltekst links centreren op button

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

27/03/2017 22:51:31
Quote Anchor link
Hallo,
Ik ben al een poos aan het puzzelen met van allerlei oplossingen maar het wil me maar niet lukken om het driehoekje verder naar links te plaatsen in het midden van de button.

Weet iemand een oplossing hoe dat kan?

zie: https://jsfiddle.net/3xq4g6u0/

Sietsko
 
PHP hulp

PHP hulp

08/12/2021 17:34:51
 
Frank Nietbelangrijk

Frank Nietbelangrijk

28/03/2017 00:22:43
Quote Anchor link
zoiets?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.afspeelknop {
    line-height:0.5em;
    font-size: 3em;
}

.audiobutton1 {
  padding: 0 3px 6px 5px;
}
 
Sietsko Bos

Sietsko Bos

28/03/2017 07:23:50
Quote Anchor link
Hoi Frank,

niet helemaal wat ik zoek want de width van de button is groter geworden.
Het is de bedoeling dat de button niet groter gaat worden en dat het driehoekje toch mooi gecentreerd is.

Sietsko
 
Jan Jaap

Jan Jaap

28/03/2017 10:47:06
Quote Anchor link
Je icoontje staat niet in een class waardoor je het ook niet goed kan positioneren.

Hier is een werkend voorbeeld: https://jsfiddle.net/m37xhvya/
 
Sietsko Bos

Sietsko Bos

28/03/2017 16:26:33
Quote Anchor link
Hey Jan Jaap, helemaal niet aan gedacht om het zo te doen.
Heb het verwerkt en het werkt prima dus precies wat ik nodig heb.

Dankje voor het meedenken :)

Sietsko
 
Ozzie PHP

Ozzie PHP

28/03/2017 17:07:06
Quote Anchor link
Met alle respect ... maar een paragraaf in een button is een NO GO!!!

Dat wordt keihard afgekeurd door een HTML-validator.

Dit is géén goede oplossing.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

28/03/2017 18:36:25
Quote Anchor link
Ozzie PHP op 28/03/2017 17:07:06:
Met alle respect ... maar een paragraaf in een button is een NO GO!!!


Inderdaad. Is ook helemaal niet nodig.

Je kunt ook bij een fixed size je padding opgeven alleen moet je dan kiezen tussen links of rechts en tussen boven of beneden.

Toevoeging op 28/03/2017 18:38:30:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
.afspeelknop {
    line-height:0.5em;
    font-size: 3em;
}

.audiobutton1 {
    height: 35px;
    width: 35px;
    padding-top: 0;
    padding-left: 5px;
}
 
Mr Beronne

Mr Beronne

29/03/2017 20:19:14
Quote Anchor link
Je kan ook gebruik maken van FontAwesome
http://jsfiddle.net/JfGVE/1923/

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<button class="btn btn-afspelen"></button>

.btn-afspelen {
    height: 35px;
    width: 35px;
  text-align: center;
}

.btn-afspelen::before {
   font-family: 'FontAwesome';
    content:"\f04b";
}
Gewijzigd op 29/03/2017 20:19:37 door Mr Beronne
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.