Søg
Avatar billede 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
Avatar billede 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
Avatar billede foxmulder58 Praktikant
27. juli 2005 - 13:07 #2
ja så skal du anvende denne kode:

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


mvh
Mads
Avatar billede 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
Avatar billede 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;
}
Avatar billede foxmulder58 Praktikant
27. juli 2005 - 13:45 #5
ja ok det er rigtigt! ....sorry!
Avatar billede 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
Avatar billede 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.
Avatar billede 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
Avatar billede 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.
Avatar billede schwarz84 Nybegynder
27. juli 2005 - 13:57 #10
*      <img src="billede" />
Avatar billede 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>
Avatar billede 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 :)
Avatar billede 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 ...
Avatar billede 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
Avatar billede foxmulder58 Praktikant
27. juli 2005 - 16:58 #15
så står de ens som du vil have dem! :)


mvh
Mads
Avatar billede eyes Nybegynder
22. juli 2012 - 12:05 #16
smid svar madsns
Avatar billede eyes Nybegynder
10. august 2012 - 09:49 #17
lukker
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:01 Måned og år på graf Af mort1 i Excel
I går 12:28 2 diske Af dcedata1977 i Andet hardware
I går 12:06 Ekstra til TV 2 : "Tilkøb" + "TV2 Ude" Af Ikke-ekspert i Fjernsyn & projektorer
I går 10:20 ASP classic kopiere database fil på server Af bsn i ASP
30/1015:04 Kan Medie Player overspille en CD ? - Hvordan Af Ikke-ekspert i Musik & videoafspillere
White papers
Flere white papers »