CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

eyes Nybegynder

27. juli 2005 - 12:54 Der er 16 kommentarer og
1 løsning

v-align og css

Hej Eksperter

Har et lille problem med at laver vertikal align på noget tekst.

jeg har en div hvori der er et billede og noget tekst.

Billedet skal være venstrestillet for teksten.

og teksten skal være vertikalt centreret på billedet sådan her.

xxxxxxxxxxxxx
xxxxxxxxxxxxx
xx Billede xx Min tekst
xxxxxxxxxxxxx
xxxxxxxxxxxxx

Har forsøgt med float:left på billede og vertical-align:middle på tekst men, det virker ikke :S

nogen der har nogle tips. PS. der skal ikke bruges Tabels.

mvh. Simon

Synes godt om

eyes Nybegynder

27. juli 2005 - 12:55 #1

Forstå mig ret.

Billedet skal være til venstre for teksten.
Og teksten centreret vertikalt ud fra billedet

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 13:07 #2

ja så skal du anvende denne kode:

<img src="ditBilede.jpg" valign="left"></img>

mvh
Mads

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 13:10 #3

Ellers kan du gøre sådan her med <div> tagget:

<div align="left">tekst</div> og <div align="right"><img src="ditBilede.jpg"></img>
</div>

mvh
mads

Synes godt om

schwarz84 Nybegynder

27. juli 2005 - 13:42 #4

foxmulder58: Der spørges efter en CSS-løsning. Det du foreslår er kun gyldigt i transitional.

eyes: Hvad med noget i retningen af HTML:
<div id="a">
<img src="bla" />
tekst
</div>
og CSS:
div#a {
margin-top: auto;
margin-bottom: auto;
}

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 13:45 #5

ja ok det er rigtigt! ....sorry!

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 13:47 #6

så kan han vel lave det på denne måde som du foreskrive

<div id="a">
<img src="mitBillede.jpg" />
</div>

<div id="b">

<---css------>
div#a {
text-align:left;
}

div#b {
text-align:right;
}

mvh
mads

Synes godt om

schwarz84 Nybegynder

27. juli 2005 - 13:48 #7

Nej, min løsning virker ikke umiddelbart, når tekst og billede er i samme div...
Det er helt oplagt at bruge tabeller, men jeg roder lidt og ser om jeg kan finde en løsning.

Synes godt om

eyes Nybegynder

27. juli 2005 - 13:55 #8

<p>
<img src=photo.jpg style="vertical-align: middle;">
<a href=ok.htm><b>Overskrift</b> - Beskrivelse
</a>
</p>

Det her funker lidt efter hensigten. Dog vil jeg gerne have ombryd efter overskriften
<br> fucker det op :S

Synes godt om

schwarz84 Nybegynder

27. juli 2005 - 13:57 #9

foxmulder: Så kommer teksten i linjen efter billedet og midt for ved siden af. Den er svær i CSS fordi vi forsøger på at grave med en skovl her. En tabel-løsning ville se sådan her ud:

<table>
<tr>
<td>
<img src="billede">
</td>
<td>
tekst
</td>
</tr>
</table>
En helt standard tabel.

Synes godt om

schwarz84 Nybegynder

27. juli 2005 - 13:57 #10

* <img src="billede" />

Synes godt om

roenving Novice

27. juli 2005 - 14:40 #11

<div style="width:300px;">
<img src="../billede.jpg" style="width:100px;height:100px;vertical-align:middle;">
En tekst
</div>

Synes godt om

eyes Nybegynder

27. juli 2005 - 15:07 #12

almost perfekt :)

<div style="width:300px;">
<img src="img.gif" style="vertical-align:middle;">
<b>Header</b><br>En tekst ala tra la la la la la la la la la la la la la la la la
</div>

Nu mangler vi bare at hele teksten kommer op ved siden af billedet, og ikke kun overskriften :)

Synes godt om

roenving Novice

27. juli 2005 - 15:14 #13

Så skal du benytte tabellen, for det er galimatias at bruge andre elementer, end de, som kan lige præcis det man har brug for ...

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 16:58 #14

Sådan her:

<div style="width:300px;"><table><tr><td>
<img src="img.gif" style="vertical-align:middle;"></td><td>
<b>Header</b>En tekst ala tra la la la la la la la la la la la la la la la la
</td></tr>

mvh
Mads

Synes godt om

foxmulder58 Praktikant

27. juli 2005 - 16:58 #15

så står de ens som du vil have dem! :)

mvh
Mads

Synes godt om

eyes Nybegynder

22. juli 2012 - 12:05 #16

smid svar madsns

Synes godt om

eyes Nybegynder

10. august 2012 - 09:49 #17

lukker

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS