Afspeeltekst links centreren op button

Door Sietsko Bos op 27-03-2017 22:51

1.996 views

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

Frank Nietbelangrijk

28-03-2017 00:22

zoiets?


.afspeelknop {
    line-height:0.5em;
    font-size: 3em;
}

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

Sietsko Bos

28-03-2017 07:23

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

28-03-2017 10:47

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

28-03-2017 16:26

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

28-03-2017 17:07

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

28-03-2017 18:36

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.

[size=xsmall]Toevoeging op 28/03/2017 18:38:30:[/size]


.afspeelknop {
    line-height:0.5em;
    font-size: 3em;
}

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

Mr Beronne

29-03-2017 20:19 gewijzigd op 29-03-2017 20:19

Je kan ook gebruik maken van FontAwesome
http://jsfiddle.net/JfGVE/1923/


<button class="btn btn-afspelen"></button>

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

.btn-afspelen::before {
   font-family: 'FontAwesome';
    content:"\f04b"; 
}

Reageren

Inloggen om te reageren