Søg
Avatar billede oasen Nybegynder
02. marts 2002 - 21:46 Der er 26 kommentarer og
1 løsning

Billede potionering

Hvoradn potioneres et billede v.h.a. CSS, så det centreres både lodret og vertikalt i en ramme?

Jeg har skrevet følgende i CSS-filen:

#startpic  {
    position: absolute;
    align: center;
    valign: middle;
    border-width: 0px;   
    border-style: none;   
    border-color: #ffffff;
    width: 510;
    height: 403;
    background: #ffffff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;   
}

Men billedet ligger sig oppe i venstre hjørne af rammen.
Centreres kun, når jeg (i selve html-filen)skriver:

<table align="center" valign="middle">
<tr><td>
<img src="startpic.jpg">
</td></tr>
</table>

Hvad er der galt?
Avatar billede hono Nybegynder
02. marts 2002 - 21:49 #1
det hedder ikke valign men vertical-align
Avatar billede hono Nybegynder
02. marts 2002 - 21:55 #2
og prøv i stedet at indsætte billedet i en div som denne:

<div style="text-align:center;vertical-align:middle;"><img src="billede.jpg"></div>

Hono
Avatar billede oasen Nybegynder
02. marts 2002 - 21:56 #3
align: center;
vertical-align: middle;

Sådan her? Det virker heller ikke....
Avatar billede oasen Nybegynder
02. marts 2002 - 21:59 #4
Ked af at sige det, men dette kan jeg heller ikke få til at virke:

#startpic  {
    position: absolute;
    style="text-align:center;vertical-align:middle;"
}
Avatar billede oasen Nybegynder
02. marts 2002 - 22:02 #5
Jo, hvis jeg sætter

<div style="text-align:center;vertical-align:middle;"><img src="billede.jpg"></div>

i selve html-filen virker det! Men jeg ville gerne have det styret fra min CSS-fil...
Avatar billede hono Nybegynder
02. marts 2002 - 22:05 #6
hvis det skal leve op til standarderne, tror jeg ikke at det kan lave sig gøre. Kig evt. lidt her: http://www.w3schools.com/css/css_reference.asp#positioning

Hono
Avatar billede oasen Nybegynder
02. marts 2002 - 22:06 #7
Jeg har bare givet billedet et ID:

<img id="startpic" src="screenshot.jpg">

og så i CSS-filen skrevet:

#startpic  {
    position: absolute;
    style="text-align:center;vertical-align:middle;"
}

Det burde da give det samme resultat!?

Kan du hjælpe?
Avatar billede oasen Nybegynder
02. marts 2002 - 22:08 #8
"vertical-align" er jo CSS1, så det burde da ikke være noget problem. Ellers har det ikke den store betydning, at billedet ikke centreres i 3% af browserne. Det vil ikke ødelægge noget.
Avatar billede hono Nybegynder
02. marts 2002 - 22:09 #9
nope, fordi det er ikke billedet du skal gøre det med, men div'en. Det er den der bruges til at positionere billedet. Men du kan gøre sådan:

I css'en:
#startpic  {
    position: absolute;
    style="text-align:center;vertical-align:middle;"
}


i html'en:
<div id="startpic"><img src="screenshot.jpg"></div>
Avatar billede oasen Nybegynder
02. marts 2002 - 22:11 #10
2 sek :)
Avatar billede oasen Nybegynder
02. marts 2002 - 22:15 #11
Det var da mærkeligt - det fungerer heller ikke!
Avatar billede hono Nybegynder
02. marts 2002 - 22:15 #12
øjeblik, jeg kigger lige på det, jeg mener det skal virke

Hono
Avatar billede oasen Nybegynder
02. marts 2002 - 22:16 #13
Det lyder også rigtig nok, skulle jeg mene! Tak :)
Avatar billede hells Nybegynder
02. marts 2002 - 22:17 #14
Det hjælper ikke at skrive style="" i et stylesheet. Det indikerer nemlig kun at der er tale om css.

Der skal i stedet bare stå:
#startpic  {
    position: absolute;
    text-align:center;
    vertical-align:middle;
}
Avatar billede hells Nybegynder
02. marts 2002 - 22:19 #15
Style="etellerandet" skal stå i div-tagget. Hvis man har

#startpic  {
    position: absolute;
    text-align:center;
    vertical-align:middle;
} 
 
i stylesheetet skal id="startpic" indsættes i div-tagget.
Avatar billede oasen Nybegynder
02. marts 2002 - 22:20 #16
Kan du få det til at virke? Det kan jeg ikke :(
Avatar billede oasen Nybegynder
02. marts 2002 - 22:22 #17
Min HTML:

<div id="startpic"><img src="screenshot.jpg"></div>


Min CSS:

#startpic  {
    position: absolute;
    text-align:center;
    vertical-align:middle;
    border-width: 0px;   
    border-style: none;   
    border-color: #ffffff;
    width: 510;
    height: 403;
    background: #ffffff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;   
}
Avatar billede hono Nybegynder
02. marts 2002 - 22:22 #18
har også problemer med det, arbejder på sagen :)

Hono
Avatar billede hono Nybegynder
02. marts 2002 - 22:23 #19
nej hvis jeg fjerner  position:absolute, så virker det fint. Hvorfor har du egentlig skrevet det?

Hono
Avatar billede oasen Nybegynder
02. marts 2002 - 22:23 #20
Behøver jeg i øvrigt at definere border, background osv., når det blot er et billede og ikke en tabel/tekstboks?
Avatar billede oasen Nybegynder
02. marts 2002 - 22:24 #21
For at en evt. tekst ikke skal "krybe" omkring billedet, men jeg prøver lige at fjerne det...
Avatar billede hells Nybegynder
02. marts 2002 - 22:25 #22
Det burde du ikke behøve
Avatar billede hono Nybegynder
02. marts 2002 - 22:26 #23
hmm, du er nok nød til at dele css'en op. Det er kun noget af det der hører til div'en. Prøv det her:

I css'en:

#startpicdiv  {
    text-align:center;
    vertical-align:middle;
    }
#startpic {
    border-width: 0px;   
    border-style: none;   
    border-color: #ffffff;
    width: 510;
    height: 403;
    background: #ffffff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;   
}

Og i html'en:

<div id="startpicdiv"><img src="screenshot.jpg" id="startpic"></div>


Hono
Avatar billede hono Nybegynder
02. marts 2002 - 22:26 #24
jeg smutter nu (skal se danish music awards, anden afdeling. Kigger tilbage lidt senere)

Hono
Avatar billede oasen Nybegynder
02. marts 2002 - 22:28 #25
Ja, så virker det!!

Men jeg behøver vel så KUN skrive

#startpicdiv  {
    text-align:center;
    vertical-align:middle;
    }

i CSS´en!?
Avatar billede oasen Nybegynder
02. marts 2002 - 22:29 #26
Hov - det skal jeg da også. 1000 mange tak for hjælpen :o)
Avatar billede hono Nybegynder
02. marts 2002 - 23:24 #27
Det var så lidt. Tak for points

Hono
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 dag 10:31 Min IPAD vil ikke oplade. Af Nørdnot i Mac
I går 18:04 Findes der et "Papir-kurv" symbol, man kan sætte på Firefox og Google Chrome ? (For oven) Af Ikke-ekspert i Browsere
03/1012:14 Ang udskrift Canon mb5050 Af made18 i Printere
02/1021:29 Vedr. Windows 11 version 26H2 Af ErikHg i Fri debat
02/1018:16 Tømme gammel PC for indhold, kan ikke tændes Af Mai i Andet software
White papers
Flere white papers »