Hallo allemaal,

Ik ben al een aantal dagen het internet af aan het speuren naar een mogelijkheid om een button te centreren. Ik heb al geprobeerd om een stukje CSS toe te voegen aan de stylesheet en ik heb geprobeerd zelf een stukje HTML te schrijven om zo de button te centreren. Maar wat ik ook probeer, de button blijft links uitgelijnd.

Wie kan mij hiermee verder helpen?

Groetjes,

Dylano

Bijgevoegd een screenshot van het probleem.

Hi Dylano,

Goeie vraag, goed ook dat je zelf al een en ander hebt geprobeerd. 

Maar ook hier gaat weer op, stel je vraag en lever er graag heldere context bij.

Wat voor css en html heb je geprobeerd en hoe?

Gebruik je een pagebuilder of iets dergelijks? Hoe heb je de knop er in eerste instantie ingezet? 

Dat zijn dingen die we dan graag willen weten, zodat we je echt kunnen helpen.

Ander wordt het echt een beetje gissen en dat werkt nu eenmaal niet zo goed.

Kick Butt!

Ramses

Het makkelijkste is om een div toe te voegen en de button een eigen class te geven (of een inline style maar dat is niet zo netjes en niet herbruikbaar).

HTML:

CSS:

.my-button { margin:auto; display:block; }

Oh, ik kan geen HTML plaatsen. Hierbij een afbeelding.

Sorry, ik heb onderstaande CSS-code toegevoegd: 

.center-btn {

margin: 0 auto;

display: block;

}

Echter, als ik vervolgens "center-btn" als extra code toevoeg in de WP-editor, verandert er niks. 

De HTML-code heb ik niet meer, maar dat was een code, waarbij ik gebruik maakte van bovenstaande CSS, maar ook dit had geen effect. 

Ik gebruik de standaard editor van WordPress.

Ik vraag me af of er geen eenvoudigere manier is om dit voor elkaar te krijgen, aangezien niet iedereen kan programmeren in HTML en CSS?

voor zover ik weet is de margin die je toepast niet correct:

moet denk ik zijn:

margin: auto;

dus de 0 weghalen

Laat je weten als 1 van bovenstaande oplossingen heeft gewerkt?

Kick Butt!

Ramses

@melvinjansen​, ik begrijp wat je bedoelt, maar als het goed is kan ik in de WP-editor bij extra CSS-classes toch gewoon (in mijn geval) "center-btn" invoeren? Dan zou deze in de HTML-code vanzelf achter het "class-element" toegevoegd moeten worden toch?

Ik heb de 0 weggehaald, maar nog steeds centreert hij niet in het midden.

Ik heb zojuist een div aangemaakt en krijg een fatsoenlijke button. Hier heb ik vervolgens "center-btn" ingezet achter het class-element. 

Maar nog steeds blijft hij links uitlijnen...

in de html editor

button-code ?

'< center> button-code '< /center> that is ?

Dylano,

Het standaard knop blok van de wordpress gutenberg editor heeft inderdaad niet de mogelijkheid te centreren en dan zal je inderdaad iets met css of html moeten doen.

Ik heb even gezocht en er zijn mogelijkheden met plugins die extra blokken toevoegen om te gebruiken.

1 daarvan:

https://ultimateblocks.com/improved-button-block/

Die geeft je de mogelijkheid om met een druk op de knop te centreren. Er zullen vast meerdere plugins zijn met extra blokken, zo maak je het wat makkelijker lijkt me.

Wellicht is dat een oplossing voor je want steeds klooien met css zit je ook niet op te wachten denk ik. 

Check ook vooral deze link even:

https://gogutenberg.com/blocks/button/

Kick Butt!

Ramses

De makkelijkste oplossing van allemaal. Ik kan me wel voor de kop slaan nu. Waarom heb ik hier niet eerder aan gedacht?! ?

@sieto​ bedankt! 

En @ramsesvanderwerf​ en @melvinjansen​, bedankt voor het meedenken.

Thnx, ik ga het proberen en laat even weten of dit inderdaad een stuk makkelijker is!

Dylano,

Check deze screenshot even, je kan de knop gewoon uitlijnen als het goed is, net even zelf geprobeerd....

@sieto​

das inderdaad ook een optie, goeie aanvulling!

Echter kom ik er net ook achter dat het zonder code kan, zie toelichting onderaan. 

Weer wat geleerd want dit wist ik zelf ook niet!

Ramses, 

Bij mij staat de toolbar alleen boven aan het scherm. Ik zie de uitlijnknoppen hier niet bij staan. Ik weet niet of dit een instelling is?

Dit lijkt me wel het meest logisch, want het lijkt me een functie die (bijna) iedereen wel nodig heeft.

Dit werkt inderdaad ook. Ga ik zeker vaker gebruiken, omdat je hier veel meer blokken kunt aanpassen etc. Geldt niet alleen voor buttons, maar voor nog veel meer. 

Bedankt voor de tip!

ook als je via de wysiwyg-editor centreert dan krijg je in de html-code nog steeds code voor het centreren.

Je kan het altijd aan de "voorkant van de website" testen met Inspecteren. Dan zie je of jouw class uitgevoerd wordt of eventueel overschreven wordt. Dit kan je dan weer oplossen door !important te gebruiken. Of door je style in een ander bestand toe te voegen.

margin: 0 auto; is ook goed. Dit geeft aan dat de top en bottom margin 0 zijn (geen margin) en de margin links en rechts op auto staan. Wat er voor zorgt dat het element gecentreerd wordt.

ziehier:

https://youtu.be/AhbWQ_gj4Ao

haha links of rechtsom dus...  scherp!

Ahhhh het kwartje is gevallen! Ik moet het blok selecteren om hem uit te kunnen lijnen. 

Bedankt voor de super hulp!

Juist, dat heeft dus inderdaad precies het zelfde effect als wat @sieto​ heeft aangegeven.

Enige verschil is, dat je het in de block editor doet of in de html editor. Effect is gelijk...

Klopt, maar dan is dit nog nét wat eenvoudiger en gebruiksvriendelijker. 

Kon me ook echt niet voorstellen dat deze mogelijkheid er niet was haha.

De < center > tag die @sieto​ noemt is een verouderde code, in html 5 is deze tag deprecated, daarom is het beter om een ccs class te gebruiken zoals @melvinjansen​ aangeeft.