Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

HTML: Centrera lodrätt... valign?

1
Skriv svar
Permalänk
Medlem
●

HTML: Centrera lodrätt... valign?

Jo nu till frågan.
På bilden ser ni hur det ser ut nu.
Det är en table med två stycken <tr>. Alltså:

<table>
  <tr>
    <td>en bild och text</td>
  </tr>
  <tr>
    <td>en bild och text</td>
  </tr>
</table

Detta ser ut såhär:

Hur göra för att centrera allt så texten ligger precis bredvid bilderna och inte sådär under, helt snett?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett litet fulhack är att lägga texten inom <span> och göra såhär:

<table>
  <tr>
    <td>en bild <span style="position: relative; top: -3px;">och text</span></td>
  </tr>
  <tr>
    <td>en bild <span style="position: relative; top: -3px;">och text</span></td>
  </tr>
</table

Men som sagt, det är ett fulhack och ingenting du bör förlita dig på ifall du gör en seriös sida.

Edit: Du kan ju förresten lägga en class istället och lägga css'en i en separat fil. Det blir mycket enklare.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Eller så kör du på med en lista istället, ungefär i denna stil:

ul.songs {
  padding: 0;
  margin: 0;
}

ul.songs li {
  background-image: url('winamp.gif') no-repeat;
  padding: 1px 0 1px 18px;
  height: 16px;
}
<ul class="songs">
  <li> Text </li>
  <li> Text </li> 
</ul>

Eller om du verkligen vill använda tabeller så ger du bilden en egen cell så kommer det ske automagiskt:

<table>
  <tr>
    <td>en bild</td><td>text</td>
  </tr>
  <tr>
    <td>en bild</td><td>text</td>
  </tr>
</table>
Visa signatur

[Min IP] [Hur många ord i minuten kan du skriva?] [Slumpa Lösenord]

Redigera
Citera flera Citera
Permalänk
Medlem
●

Skogga du har rätt...
Jag löste det med den tabellen du gav mig men det e ju faktiskt cleanare med en lista. Provar det med en gång.

EDIT:
Nu har jag kommit fram till:

ul.songs {
	margin-left: 10px;
	list-style: none inside url('gfx/mp3.jpg');
	font-family: Verdana;
	font-size: 0.7em;
	color: #FFF;
}
ul.songs li {
	
}

Men det blir samma resultat som i första inlägget.
Måste man använda background-image och mixa med paddings?
Isåfall kanske det e lika bra med en tabell med två separata <td>'s.
Eller?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Testpilot
●

Funkar inte vertical-align: middle ? har jag använd flera gånger när jag haft just det där problemet.

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av hunden
Funkar inte vertical-align: middle ? har jag använd flera gånger när jag haft just det där problemet.

Nä, funkar inte :/

Redigera
Citera flera Citera
Permalänk
Testpilot
●
Citat:

Ursprungligen inskrivet av kismo
Nä, funkar inte :/

Testade nyss och det funkade för mig

td img{
  vertical-align: middle;
}
<table>
  <tr>
    <td><img src="en_bild.gif" /> och text</td>
  </tr>
  <tr>
    <td><img src="en_bild.gif" /> och text</td>
  </tr>
</table>
Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av hunden
Testade nyss och det funkade för mig

Jaha, jag trodde du menade att det skulle funka med vertical-align på en lista.
Det fick jag däremot inte att fungera.
Jag skulle kunna använda tables eftersom det kommer egentligen att hämtas från en databas. Men lista känns smidigt o nice ändå.

Så: En lista där bilden centrerar sig rätt vore nice.
Om inte det går så får jag köra tables.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Visst funkar det lika bra med en lista:

<html>
  <head>
    <style>
      li img {vertical-align: middle;}
    </style>
  </head>
  <body>
    <ul>
      <li><img src="smily.jpg"/>xxx</li>
      <li><img src="smily.jpg"/>yyy</li>
    </ul>
  </body>
</html>
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av di0caer
Visst funkar det lika bra med en lista:

<html>
  <head>
    <style>
      li img {vertical-align: middle;}
    </style>
  </head>
  <body>
    <ul>
      <li><img src="smily.jpg"/>xxx</li>
      <li><img src="smily.jpg"/>yyy</li>
    </ul>
  </body>
</html>

Jo visst, det funkar men då måste jag fortfarande sätta en <img/> i en <li> istället för att i css köra med list-style: none inside url('bild.jpg');

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara