Ik weet dat hier een aantal topics over geweest zijn, maar helaas heb ik daar het juiste antwoord niet in kunnen vinden.

Ik wil graag het woordje "Twitter" centreren en dit gaat niet zoals ik wil. Hij moet verticaal gecentreerd worden achter een plaatje van 32x32 pixels.

Code:

<a href="http://www.twitter.com/" title="Ons Twitteraccount"><img src="https://www.sitedeals.nl/images/icons/twitter.png" alt="Vind ons op Twitter!" title="Twitter" /><p style="">Twitter</p></a>

De CSS-code moet in het <p style=""> komen. In de bijlage is te zien hoe het er nu uitziet.

Weet iemand hoe ik dat voor elkaar krijg?

Alvast hartelijk bedankt!

Yoeri Boven.

Snap niet helemaal wat je bedoeld, moet het woord twitter er recht onder komen of aan de rechter kant ernaast?

Als je ook een voorbeeld zou kunnen posten met hoe je het graag wilt hebben (even snel in photoshop o.i.d. zetten) dan is het zo verholpen.

Mvg,
RMols

Iets van:

A{display:block; float: left; width: 50px;}
Img {display:block; float: left;}
P.style {display:block; float:left;}

Niet getest, maar kan je proberen. Eventueel nog even de img en p.style een breedte en hoogte meegeven. Je moet wellicht ook de width van de a aanpassen.

Ik had als ik jou was trouwens alles in een div-je gegooit:
<div id="block">
<a href="" title="">
<img src="" alt="" />
<Span class=""><p>twitter</p></span>
</a>
</div>

En dan die span class een block laten zijn, ipv de p. Dat is hoe ik het zou oplossen. Uitlijning even netjes maken en klaar. Succes!!

De tekst moet er rechts verticaal gecentreerd naast komen. Ik ga de oplossing van Stefan vanavond even proberen!

Oeh dan heb ik het niet helemaal goed begrepen. Je kan het echter wel zo dan toepassen, alleen even wat spelen met de width's.

Yoeri,

Als je even een nieuwe html-document opent.

Dit in je head sectie plakken

<style>

img { float:left; }
p.style { float:left; padding:0; }

/* Margin meegeven */
p.style { margin:20px 0 0 10px; }

</style>

En dit in je body plakken

<img src="twitter.png" alt="" title="" />
<p class="style">Twitter</p>

Dan heb je een voorbeeld.

Tenminste, dit is wat je wil bereiken, toch? :-)

Succes.

Mvg,
R.Mols

Verticaal gecentreerd? Je bedoelt gewoon op de helft van de image en dan ernaast?

PHP Code:

<div style="width:200px;"><a href="http://www.twitter.com/" title="Ons Twitteraccount"><img src="https://www.sitedeals.nl/images/icons/twitter.png" alt="Vind ons op Twitter!" title="Twitter" style="foat:left;height:32px;width:32px;" /><p style="margin:0px;padding:0px;line-height:32px;float:right;">Twitter</p></a></div> 


Niet zoals bovenstaand met margins.. line-height is hier veel beter geschikt voor.

Maakt in principe vrij weinig uit wanneer je een div block erom heen zet met een hoogte :-)

Beide gevallen is dan in te zetten

Origineel gepost door RMols

Maakt in principe vrij weinig uit wanneer je een div block erom heen zet met een hoogte :-)

Beide gevallen is dan in te zetten

Als jij met margins gaat werken, en de font-size wilt vergroten, zul je hier de margins weer op af moeten stellen. Door middel van line-height heb je hier geen last van.

Ah, dat van Robin werkt. Bedankt, alleen wil ik het woord "Twitter" verder naar links hebben. Nu staat het icoon helemaal links en het woord helemaal rechts. Float:right; verwijderen werkt niet want dan komt hij er weer onder en de margin in de - laten gaan werkt ook niet. Enig idee?

Origineel gepost door Yoeri Boven

Ah, dat van Robin werkt. Bedankt, alleen wil ik het woord "Twitter" verder naar links hebben. Nu staat het icoon helemaal links en het woord helemaal rechts. Float:right; verwijderen werkt niet want dan komt hij er weer onder en de margin in de - laten gaan werkt ook niet. Enig idee?

Daarvoor zul je de width van de outer div even moeten afstellen, ik weet niet hoeveel tekst je erin wou plaatsen, dus vandaar.

PHP Code:

<div style="width:200px;"><a href="http://www.twitter.com/" title="Ons Twitteraccount"><img src="https://www.sitedeals.nl/images/icons/twitter.png" alt="Vind ons op Twitter!" title="Twitter" style="float:left;height:32px;with:32px;" /><p style="margin:0px;padding:0px;line-height:32px;float:right;">Twitter</p></a></div> 


<div style="width:200px;"> zul je even een lagere waarden moeten geven dus.

Ah, dat is volkomen logisch Robin. Bedankt!