Bild vertikal und horizontal mittig ausrichten? - CSS @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe

siob · 22.03.06, 17:35

Hallo zusammen,
bräuchte mal schnell nen Code, wie ich ein Bild horizontal, sowie vertikal mittig ausrichte!

Vielen vielen Dank im Voraus!

Gruß
siob

**Maik** · 22.03.06, 17:58

In welchem Element ist die Grafik eingebettet?
Ist die Grafik-Dimension (Breite/Höhe) bekannt?

siob · 22.03.06, 18:03

einfach ne ganz normale HTML-Datei

auf der Seite soll nix sein, außer die Grafik .. und die soll wie gesagt sowohl horizontal sowie vertikal mittig ausgerichtet sein .. Größe ist ca. 400 x 150 Pixel

**Maik** · 22.03.06, 18:09

Dann hätte ich einen Lösungsvorschlag

            
                    HTML-Code:
                  
                   	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>

</head>
<body>

     <img class="center" src="">

</body>
</html>

siob · 22.03.06, 18:21

jepp .. genau so hab ich das gemeint.
Nochmals vielen Dank

hikeda_ya · 23.03.06, 10:46

du kannst es auch mit frames machen und die seite mit dem bild aufrufen - hier mal ein beispiel

            
                    Code:
                  
                   	<html>
<head>

<title>www.hikeda-ya.de</title>
<meta name="author" content="hikeda_ya">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">

<frameset frameborder="0" framespacing="0" border="0" cols="*,740px,*">

   <frame name="randl" src="rand.html" scrolling="no" resize="noresize">

<frameset frameborder="0" framespacing="0" rows="*,523px,*">

   <frame name="oben" src="rand.html" scrolling="no" resize="noresize">

   <frame name="haupt" target="haupt" src="start.html" scrolling="no" resize="noresize">

   <frame name="unten" src="rand.html" scrolling="no" resize="noresize">

</frameset>

   <frame name="randr" src="rand.html" scrolling="no" resize="noresize">

</frameset>

<noframes>

Ihr Browser unterstützt keine Frames!

</noframes>

</head>

<body text="#000000" bgcolor="#050100" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<!--

Ersteller der Frame Deffinition ist:

wolfgang steiner
alias hikeda_ya
-->

</body>

</html>

**Maik** · 23.03.06, 12:23

Und was soll das Frameset bringen?

Die Grafik ist damit noch lange nicht horizontal und vertikal in der Seite zentriert.

hikeda_ya · 23.03.06, 16:12

nun wenn auf der seite nur das bild zu sehen sein soll

dann machst du bei der seite vom bild

            
                    Code:
                  
                   	<img src=blabla>

und passt den frame so an das er nur so gross ist wie das bild - und schon hast du ausen rumm den rahmen

den rahmen bekommst du hin mit ner leeren html seite

so hab ich das bei meiner seite auch gemacht

http://www.hikeda-ya.de

**Maik** · 23.03.06, 16:15

Naja, ganz schön umständlich die Methode, und von CSS meilenweit entfernt.

hikeda_ya · 24.03.06, 08:13

ich weiss - sollte ja nur ne alternative sein