Avatar billede themepark Nybegynder
26. september 2003 - 13:49 Der er 77 kommentarer og
3 løsninger

Centrering af billede BÅDE horisontalt OG vertikalt

Ja, emnet siger sig selv...jeg hader at måtte spørge om noget så simpelt, men jeg aner simpelthen ikke hvordan jeg gør :(
Avatar billede jonmh Nybegynder
26. september 2003 - 13:55 #1
text-align: center; vertical-align: middle
Avatar billede lordhead Nybegynder
26. september 2003 - 13:56 #2
.billede {
  margin-right:auto;
  margin-left:auto;
  vertical-align:center;
}
Avatar billede lordhead Nybegynder
26. september 2003 - 13:57 #3
text-align centrere kun tekst :-)
Avatar billede themepark Nybegynder
26. september 2003 - 13:57 #4
Det virker ikke :( Og den eneste linje, jeg har er:

<IMG SRC="605768QFT.jpg" style="text-align: center; vertical-align: middle;">

:(
Avatar billede themepark Nybegynder
26. september 2003 - 13:57 #5
wow...prøver lige nr 2 :)
Avatar billede themepark Nybegynder
26. september 2003 - 13:58 #6
<IMG SRC="605768QFT.jpg" style="margin-right:auto; margin-left:auto; vertical-align:center;"> virker heller ikke :'(
Avatar billede mik789 Nybegynder
26. september 2003 - 13:58 #7
skal nu nok være vertical-align: middle under alle omstændigheder. "center" plejer at gå på den vertikale dimension
Avatar billede lordhead Nybegynder
26. september 2003 - 13:58 #8
og i dit IMG tag: <IMG SRC="605768QFT.jpg" class="billede">
Avatar billede themepark Nybegynder
26. september 2003 - 13:58 #9
Det er for øvrigt ikke så vigtigt, at det er centreret på skærmen men på udprint...det er nemlig bare noget, jeg skal have printet ud :)
Avatar billede themepark Nybegynder
26. september 2003 - 13:59 #10
Heller ikke hvis jeg erstatter det med vertical-align: middle :( Det burde vel være muligt bare at tilføje det i STYLE delen i stedet for at skrive det som et CSS script.
Avatar billede lordhead Nybegynder
26. september 2003 - 14:03 #11
prøv dette: <img style="margin-height:auto;margin-width:auto;">
Avatar billede themepark Nybegynder
26. september 2003 - 14:04 #12
Heller ikke :(
Avatar billede mik789 Nybegynder
26. september 2003 - 14:08 #13
html, body {
  height: 100%
}
#centrering {
  position: absolute;
  top: 50%;
  left: 50%;
  height: [billedets højde]px;
  width: [billedets breee]px;
  margin-top: -[halvdelen af billedets højde]px;
  margin-width: -[halvdelen af billedets bredde]px;
}

<div id="centrering"><img src="mitbilleder.jpg" height="mål i px" width="mål i px" alt=""></div>
Avatar billede lordhead Nybegynder
26. september 2003 - 14:10 #14
altså::

<img style="margin-top:auto;margin-width:auto;top:auto;left:auto;">
Avatar billede lordhead Nybegynder
26. september 2003 - 14:11 #15
-- Man behøver nemlig ikke at gøre det i % men kan gøres med auto...!
Avatar billede mik789 Nybegynder
26. september 2003 - 14:11 #16
ups, det skal ikke være margin-width, men margin-left
Avatar billede mik789 Nybegynder
26. september 2003 - 14:12 #17
i mit ex., altså ;-) ikke i lordheads
Avatar billede krogstrup Nybegynder
26. september 2003 - 14:12 #18
good old fashion way...

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="whatever"></td>
</tr>
</table>
Avatar billede lordhead Nybegynder
26. september 2003 - 14:13 #19
Det er meget enklere end vi går og filosofere om... har bare glemt hvordan det er man gør!

roengving eller exp... kom lige og giv et svar ;)
Avatar billede mik789 Nybegynder
26. september 2003 - 14:14 #20
kort forklaring til min metode:

man kan altid centrere en div. placer top/left punkt i midten af skærmen ved at angive begge til 50%. angiv højde og bredde. sæt derefter den negative top/left margin til halvdelen af højden/bredden. Se udførligt ex. på http://e-tidsskrift.dk/dev/center_div_css.php
Avatar billede themepark Nybegynder
26. september 2003 - 14:15 #21
Okay...nu har jeg kigget lidt i CSS, og går ud fra at mit billede må være en af disse typer, når det bare står som <IMG SRC="Billede.jpg">...men hvilken?

inline, non-replaced elements
inline, replaced elements
block-level, non-replaced elements in normal flow
block-level, replaced elements in normal flow
floating, non-replaced elements
floating, replaced elements
absolutely positioned, non-replaced elements
absolutely positioned, replaced elements
Avatar billede themepark Nybegynder
26. september 2003 - 14:16 #22
Ja, roenving kan man da altid regne med *g*
Avatar billede mik789 Nybegynder
26. september 2003 - 14:16 #23
et img er per default inline. hvis du vil have det som blok skal det angives sådan: display: block;
Avatar billede themepark Nybegynder
26. september 2003 - 14:18 #24
Okay...men er det så non-replace, eller replaced? Jeg har INGEN anelse om hvad det betyder :(
Avatar billede lordhead Nybegynder
26. september 2003 - 14:18 #25
display:block plejer at blive brugt i BG sammenhæng..
Avatar billede themepark Nybegynder
26. september 2003 - 14:19 #26
BG? BackGround?
Avatar billede lordhead Nybegynder
26. september 2003 - 14:20 #27
ja nemlig ;-)
Avatar billede themepark Nybegynder
26. september 2003 - 14:22 #28
Ahhhhh :)
Avatar billede themepark Nybegynder
26. september 2003 - 14:22 #29
Men er et billede per default non-replaced eller replaced?
Avatar billede lordhead Nybegynder
26. september 2003 - 14:23 #30
fandt dette i at andet spm:

body {
  text-align : center ;
}
   
<style type="text/css">
div.billede {
  position : absolute;
  top : 50% ;
  left : 50% ;
  width : 500px ;
  height : 350px ;
  margin-top : -191px ;
  margin-left : -266px ;
  margin-right : auto ;
  margin-bottom : auto ;
  padding : 15px;
  overflow : auto;
  border : 1px solid black ;
}
    </style>
- Dette skal sættes ind under <head>

ved dit img tag:
<div class="billede"><img src="blablabla"></div>
Avatar billede mik789 Nybegynder
26. september 2003 - 14:25 #31
lordhead> dette er i princippet det samme som mit svar - bare en smule mere indviklet
Avatar billede lordhead Nybegynder
26. september 2003 - 14:27 #32
mik789> Det ved jeg i prinsippet godt... men der er nu også en nemmere måde at gøre det på... hmmmmmm...
Avatar billede mik789 Nybegynder
26. september 2003 - 14:28 #33
ja det må der være. hmmmn....
Avatar billede lordhead Nybegynder
26. september 2003 - 14:29 #34
dette kunne også være et alternativ:

.billede {
  width: BREDDE;
  height: HØJDE;
  background-image: url([url]);
  background-repeat: no-repeat;
  background-position: center center;
}

<div class="billede">&nbsp;</div>
Avatar billede themepark Nybegynder
26. september 2003 - 14:29 #35
Well, der må da være en måde at centrere et billede på uden at skulle bruge dets højde og bredde, vil jeg da mene :( Det virker faktisk, men i Vis udskrift er det så ALT for langt nede på siden :(

Og for tredje gang...er et IMG element som standard, udover at være inline, så non-replaced eller replaced?
Avatar billede mik789 Nybegynder
26. september 2003 - 14:31 #36
hvad med:
<img src="whatever" align="middle" style="vertical-align: middle;" alt="">

dette burde være ok hvis bare du bruger en transitional doctype og ikke en strict
Avatar billede lordhead Nybegynder
26. september 2003 - 14:33 #37
når jeg tænker mig om:

<table width="100%" height="100%" align="center" valign="middle">
<img src="sti">
</table>
Avatar billede mik789 Nybegynder
26. september 2003 - 14:36 #38
<head>
<style type="text/css"><!--
html, body {
  height: 100%;
}
--></style>
</head>

Og så:

<table width="100%" style="height:100%;">
<tr><td align="center" valign="middle"><img osv></td></tr>
</table>
Avatar billede mik789 Nybegynder
26. september 2003 - 14:38 #39
dvs. tabellen selvfølgelig imellem <body> og </body>
Avatar billede mik789 Nybegynder
26. september 2003 - 14:40 #40
og så skal du nok også have style="height:100%;" ind i <td osv.>
Avatar billede lordhead Nybegynder
26. september 2003 - 14:41 #41
html, body {
  height: 100%;
} er ikke nødvendig..
Avatar billede themepark Nybegynder
26. september 2003 - 14:42 #42
*HOST* Hmm...måske dem med body ikke virkede, fordi jeg ikke havde nogen BODY? ;)

Jeg har hele tiden kun haft den IMG linje...mere er der egentlig ikke brug for :)

Den sidste virker faktisk, mik789, også på print :)

Men jeg lader nu lige spørgsmålet stå åbent til roenving og exp...hvis de virkelig kender en nemmere metode, vil jeg sgu have den at vide ;)

For øvrigt imponerende så meget folk kan komme op på dupperne ud fra et SÅ let spørgsmål *g*
Avatar billede mik789 Nybegynder
26. september 2003 - 14:42 #43
lordhead> jo hvis billedet også skal være centreret på siden i højden så tror jeg det er nødvendigt. Ellers vil tabellen ikke blive højere end billedets højde og blive placeret i toppen af siden
Avatar billede themepark Nybegynder
26. september 2003 - 14:46 #44
Nu har jeg lige siddet og eksperimenteret lidt med den sidste kode, og følgende er alt, hvad der er nødvendigt ;)

<table width="100%" height="100%">
<tr><td align="center" valign="middle"><IMG SRC="605768QFT.jpg"></td></tr>
</table>
Avatar billede lordhead Nybegynder
26. september 2003 - 14:46 #45
har du ingen body???
Avatar billede themepark Nybegynder
26. september 2003 - 14:47 #46
lordhead, nej det sagde jeg jo lige :) Det er kun et dokument, jeg skal bruge til eget forbrug, og til at skrive et centreret billede ud...så er img delen jo nok :)
Avatar billede mik789 Nybegynder
26. september 2003 - 14:48 #47
storbytosse> det kommer an på om du bare kører lige på med <html> osv, dvs. det der hedder quirkmode eller du angiver en rigtig doctype, og altså kører i standard mode. Den kode du har lagt her til sidst virker kun i quirkmode
Avatar billede mik789 Nybegynder
26. september 2003 - 14:49 #48
du kører sikker med Internet Explorer. Den er meget large med din kode. Bare lidt, og den fortolker selv resten - men nu ikke altid sådan som man vil have det.
Avatar billede lordhead Nybegynder
26. september 2003 - 14:50 #49
du skal altså benytte alle kendte html teg's for at danne en side ;)
Avatar billede themepark Nybegynder
26. september 2003 - 14:52 #50
Doctype har jeg nu aldrig brugt, og ja, du har ganske ret, jeg bruger IE...god til kaffen ;)

Anyway...jeg er ikke så krævende, specielt når det kun er noget, mine egne øjne skal se :)
Avatar billede themepark Nybegynder
26. september 2003 - 14:52 #51
lordhead, faktisk ikke...det fungerer fint bare med de 3 linjer ;) Men jo, selvfølgelig skal man da skrive det hele, når man udvikler en side til nettet...heldigvis er det bare ikke det, jeg skal ;)
Avatar billede exp Juniormester
26. september 2003 - 14:54 #52
Avatar billede lordhead Nybegynder
26. september 2003 - 14:56 #53
exp>> det var faktisk hvad jeg sagde på et tidspunkt... men jeg glemte tr og td *pinligt* :(
Avatar billede exp Juniormester
26. september 2003 - 14:56 #54
:-)
Avatar billede themepark Nybegynder
26. september 2003 - 14:56 #55
Øhm exp...tak fordi du så mit andet indlæg...men den mulighed ER blevet foreslået ;)

Se kommentaren 26/09-2003 14:13:19 af lordhead ;)
Avatar billede exp Juniormester
26. september 2003 - 15:00 #56
Oki, er heller ikke helt sikker på hvad det er du ønsker... problemet er at der ikke en nogen w3c standard for det (jeg fornemmer) du vil have (lodret centrering) Der skal lidt koden rundt for at det virker
Avatar billede themepark Nybegynder
26. september 2003 - 15:04 #57
exp, jamen, du har forstået det 100 % korrekt...jeg vil have det centreret både lodret og vandret (vertikalt og horisontalt lyder bare finere *g*)

mik789's sidste eksempel fungerer fint, og han skal også nok få point, men som lordhead foreslog, kendte I måske nogle nemmere/bedre metoder til dette :)

Jeg ved da roenving plejer at kunne hjælpe når det gælder *g*
Avatar billede exp Juniormester
26. september 2003 - 15:08 #58
Problemet er at height i css ikke helt opfører sig "let-tilgængeligt" i forhold til width... Det er et konstant tilbagevendende problem
Avatar billede lordhead Nybegynder
26. september 2003 - 15:09 #59
Den bliver nok ikke bedre end mik789's... men du har jo oprettet det i css, og jeg _ved_ der er en meget nem og hurtig måde at gøre det på vha css...
Avatar billede cdc Novice
26. september 2003 - 15:10 #60
er det bare et billed eller er det en bagrund
Avatar billede exp Juniormester
26. september 2003 - 15:10 #61
lordhead >>
Ikke lodret. Vandret centrering er simpelt nok
Avatar billede themepark Nybegynder
26. september 2003 - 15:11 #62
Et billede...det skal netop IKKE være en baggrund :)

Og exp, ALT er et konstant tilbagevendende problem ;)

lordhead, rent HTML mæssigt nej, der har du nok ret, men som du selv siger, så har exp og roenving måske en bedre løsning...og som sagt så FÅR mik789 da også point på baggrund af den løsning...men alt det med point kommer senere :)
Avatar billede lordhead Nybegynder
26. september 2003 - 15:12 #63
man kunne jo også angive det som baggrund...

<style type="text/css">
body { background: url(sti) center center no-repeat; }
</style>
Avatar billede mik789 Nybegynder
26. september 2003 - 15:13 #64
egentligt er det klart nok: css kan kun beregne højde af noget hvis der er angivet højde for boksen uden om (parent elementet). Det er derfor jeg sætter html og body til 100%. Man skal så normalt også huske højde på elementerne imellem ned til det element man vil have centreret.
Avatar billede mik789 Nybegynder
26. september 2003 - 15:14 #65
og tilsvarende med lodret centrering: centrering i forhold til hvad? hvis ikke parent elementet har en højde kan child elementet ikke centreres lodret
Avatar billede exp Juniormester
26. september 2003 - 15:14 #66
... men i css er height: 100% IKKE lovligt...
Avatar billede mik789 Nybegynder
26. september 2003 - 15:15 #67
exp> jo, hvis det er gjort fra toppen, dvs. med html og body også. Jeg har valideret det mange gange uden fejl
Avatar billede lordhead Nybegynder
26. september 2003 - 15:16 #68
...hvad så med 99% ;]
Avatar billede exp Juniormester
26. september 2003 - 15:17 #69
kunne man fyre en div ind som det første i dokumentet, og så placere den center center?
Avatar billede mik789 Nybegynder
26. september 2003 - 15:18 #70
exp> ?
Avatar billede exp Juniormester
26. september 2003 - 15:18 #71
Hmm... næh.
Avatar billede lordhead Nybegynder
26. september 2003 - 15:18 #72
exp... vi kan da prøve :)
Avatar billede themepark Nybegynder
26. september 2003 - 15:34 #73
Nå...med dette indlæg vil der være 73 indlæg...det er vist på tide at holde *g*

Tak alle sammen for at have spammet min mailbox i så høj grad ;) Det er da rart at vide, at der kan være SÅ meget opbakning til et SÅ simpelt spørgsmål, og SÅ meget debat eller hvad man nu skal kalde det *g*

Nå, men til pointgivningen. Som jeg HAR sagt, får mik789 point for sit forslag. Det gør du også, lordhead. Ja du glemte <tr> og <td>, men det siger sig selv at de skal med...desværre blot ikke for mig :(

exp, gider du også lægge et svar? Jeg synes sådan set, du gav nok information til at det også bør være berettiget :)
Avatar billede lordhead Nybegynder
26. september 2003 - 15:35 #74
jamen jeg takker da for points ;-)
Avatar billede mik789 Nybegynder
26. september 2003 - 15:42 #75
takker. det er så sidste span herfra ;-)
Avatar billede themepark Nybegynder
26. september 2003 - 15:46 #76
Vent nu med at takke, til jeg får respons fra exp *g*
Avatar billede exp Juniormester
26. september 2003 - 16:00 #77
Jamen okay så... bekræftede vel egentlig bare hvad de andre sagde ;-)
Avatar billede themepark Nybegynder
26. september 2003 - 16:07 #78
Tjo, men du forklarer også lidt om W3C standard...det er bl.a. det jeg går ud fra ;)
Avatar billede lordhead Nybegynder
26. september 2003 - 16:08 #79
jamen... tak for points ;D
Avatar billede exp Juniormester
26. september 2003 - 16:09 #80
Oki :-)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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