Ik ben bezig om een partnerpagina met logo's te maken.
Alle CSS opmaak werkt behalve dat alle afbeeldingen worden gecentreerd op de pagina.
Het gaat om de pagina: http://www.moerspinksterweekend.nl/partners/
Op de wordpress pagina is de plugin wpbakery page builder geďnstalleerd.
Op de pagina is een Raw HTML element geplaatst met de volgende html:
In wpbakery page builder zit ook een custom css gedeelte waar ik de volgende styling in heb geplaatst:Code:<!-- Platinum partners 1 per rij --> <div class="partner_center"> <a class="apart" href="https://www.ardaghgroup.com/"> <img class="logomax" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/ardagh_group.jpg" /> </a> </div> <!-- Goud partners 2 per rij --> <div> <a class="apart" href="https://kruiwagenoutlet.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/kruiwagenoutlet.jpg" /> </a> <a class="apart" href="https://maoske.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/t_maoske.jpg" /> </a> <a class="apart" href="https://shtotaalbouw.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/sh_totaalbouw.jpg" /> </a> <a class="apart" href="http://www.hacjansenautos.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/04/hac_jansen.jpg" /> </a> <a class="apart" href="http://www.gebrvermeertransport.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/vermeer.jpg" /> </a> <a class="apart" href="http://www.bouwbedrijfvanson.nl/" target="_blank" rel="noopener"> <img class="logogroot" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/van_son.jpg" /> </a> </div> <!-- Zilver Partners 3 per rij --> <div> <a class="apart" href="http://www.vandoormaaldemoer.nl/" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/van_doormaal.jpg" /> </a> <a class="apart" href="http://www.vanstriengrondverzet.nl/" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/04/van_strien_grondzet.jpg" /> </a> <a class="apart" href="#" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/hazenberg.jpg" /> </a> <a class="apart" href="www.vanloondongen.nl" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/van_loon.jpg" /> </a> <a class="apart" href="www.gunco.com" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/gunco.jpg" /> </a> <a class="apart" href="https://www.coolworld-rentals.com/nl" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/coolworld.jpg" /> </a> <a class="apart" href="https://www.vanwijlen.eu" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/van_wijlen.jpg" /> </a> <a class="apart" href="http://www.bayens-mechanisatie.com/" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/bayens.jpg" /> </a> <a class="apart" href="#" target="_blank" rel="noopener"> <img class="logomiddel" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/jvanloon.jpg" /> </a> </div> <!-- Brons partners 4 per rij --> <div> <a class="apart" href="http://www.lotcare.nl/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/lotcare.png" /> </a> <a class="apart" href="http://www.dbbouw-timmerwerken.nl/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/03/DB_bouw-timmerwerken.jpg" /> </a> <a class="apart" href="http://www.merkx-installatiewerken.nl/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/04/merkx_installatiewerken.jpg" /> </a> <a class="apart" href="http://www.demoerderijgroepsaccommodatie.nl/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/moerderij.jpg" /> </a> <a class="apart" href="https://www.jvd-outdoor.com/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/jvd_outdoor.jpg" /> </a> <a class="apart" href="http://www.truewood.nl/" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/truewood.jpg" /> </a> <a class="apart" href="#" target="_blank" rel="noopener"> <img class="logoklein" src="http://www.moerspinksterweekend.nl/wp-content/uploads/2018/05/premium.jpg" /> </a> </div>
De meest voorkomende oplossing die ik tegen kom maar bij mij niet wilt werken is:Code:.partner_center { display: block; margin-left: auto; margin-right: auto; } .apart { padding: 0; } .logomax { height: 468px; width: 940px; float: left; margin: 10px; } .logogroot { height: 350px; width: 460px; float: left; margin: 10px; } .logomiddel { height: 226px; width: 300px; float: left; margin: 10px; } .logoklein { height: 151px; width: 220px; float: left; margin: 10px; } .centraal { width: 100%; height: 100%; }
Is er iemand die mij kan helpen?Code:Display: block; margin-left: auto; margin-right: auto;
- Worpress centreert afbeeldingen niet
-
10-10-2018, 09:11 #1
- Berichten
- 29
- Lid sinds
- 18 Jaar
Worpress centreert afbeeldingen niet
-
In de schijnwerper
Ervaren SEO Linkbuilder voor €17,50/uur - Boost Uw Online Zichtbaarheid!Freelance / WerkOnline Cursus Zelfvertrouwen (.nl) is te koop | Met SEO waardeDomein te koopVerkoop website en domeinnaam Bestekeuze.nlWebsite te koopLinkvada.com Linkbuilding Platform: Direct linkbuilden op 60.000+ premium domeinenLinkpartners -
10-10-2018, 09:29 #2Particulier
- Berichten
- 911
- Lid sinds
- 9 Jaar
Re: Worpress centreert afbeeldingen niet
Text-align element gebruiken? Zou de truc moeten doen als extra class op je Raw HTML.
-
10-10-2018, 09:30 #3Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Re: Worpress centreert afbeeldingen niet
Deze?
.partner_center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
-
10-10-2018, 09:40 #4
- Berichten
- 1.530
- Lid sinds
- 16 Jaar
Re: Worpress centreert afbeeldingen niet
Volgens mij gaat het fout bij de volgende code
position: relative;
left: -84.5px;
Dat zit dan weer om de een of andere reden inline:
<div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid vc_custom_1538937754510 vc_row-has-fill vc_column-gap-10" style="position: relative;left: -84.5px;box-sizing: border-box;width: 1349px;padding-left: 84.5px;padding-right: 84.5px;">
-
10-10-2018, 09:41 #5
- Berichten
- 29
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
Code:.extra_class{ text-align:center; }
-
10-10-2018, 09:47 #6
- Berichten
- 918
- Lid sinds
- 17 Jaar
Re: Worpress centreert afbeeldingen niet
Je moet display niet op block zetten, maar op table. Als je dan de margin-left en margin-right op auto zet dan werkt het.
-
10-10-2018, 10:19 #7
- Berichten
- 29
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
-
10-10-2018, 10:34 #8Particulier
- Berichten
- 911
- Lid sinds
- 9 Jaar
-
10-10-2018, 10:43 #9
- Berichten
- 29
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
Volgens mij gaat het fout bij de volgende code
position: relative;
left: -84.5px;
Dat zit dan weer om de een of andere reden inline:
<div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid vc_custom_1538937754510 vc_row-has-fill vc_column-gap-10" style="position: relative;left: -84.5px;box-sizing: border-box;width: 1349px;padding-left: 84.5px;padding-right: 84.5px;">
Helaas ook niet.
-
10-10-2018, 12:12 #10
- Berichten
- 96
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
moeten er dan 2 , 3 ,4 op een rij komen ( gecentreerd ) ?
goud goud
zilver zilver zilver
brons brons brons brons
-
10-10-2018, 12:26 #11
- Berichten
- 29
- Lid sinds
- 18 Jaar
-
10-10-2018, 12:34 #12
- Berichten
- 96
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
wil je een nette oplossing of en quik and dirty ( zie je alleen als je de bron bekijkt en werk met een tabel of 4 ) ?
-
10-10-2018, 13:05 #13
- Berichten
- 29
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
-
10-10-2018, 13:15 #14
- Berichten
- 96
- Lid sinds
- 18 Jaar
Re: Worpress centreert afbeeldingen niet
<table width = "99%">
<tr>
<td width = "49%">link&foto</td>
<td width = "49%">link&foto</td>
</tr>
</table>
suc6
-
10-10-2018, 13:24 #15Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic