Text zentriert über einem Bild (vert+hor)

[ak-swiff]

Hi starwarskid,

probier mal ein div in dein div mit dem bild zu legen mit ungefähr den CSS angaben die ich unten gemacht habe:

<div style="deinSytle">
  <div style="position: relative; top: 50%; left 50%;">text</div>
  <img  style="deinSytle"/>
</div>

Ich denke das klappt :) sonst poste mal deinen code dann bau ich dir das ein. aber erstmal selber probiern ;)

Also das klappt nicht ganz. top,left 50% zentriert das div ja nicht wirklich (nicht ganz). Und es kommt so zu komischen Überlappungen mit dem img.

Hier mal mein Code. Ist ein wenig lang, da ich alles über den DOM mache:

// create the element-div
 var uc_div = document.createElement("div");
        uc_div.id = ucID;
        uc_div.className = "useCase";

var inner_div = document.createElement("div");
 inner_div.style.position = "relative";
  inner_div.style.border = "1px solid black";
  inner_div.style.top = "50%";
  inner_div.style.left = "50%";

var text = document.createTextNode("UseCase");
        var i = document.createElement("i");
        i.appendChild(text);
        inner_div.appendChild(i);

var br = document.createElement("br");
        inner_div.appendChild(br);

text = document.createTextNode("UseCase" + uc_count);
        var b = document.createElement("b");
        b.appendChild(text);
        inner_div.appendChild(b);

uc_div.appendChild(inner_div);

var uc_img = document.createElement("img");
 uc_img.name = "uc_img";
        uc_img.id = "uc_img";
 uc_img.src = "images/usecase.jpg";
 uc_img.style.position = "relative";
 uc_img.style.width = '100%';
        uc_img.style.height = '100%';
        uc_img.alt = "";
        uc_img.className = "uc_img";
 uc_div.appendChild(uc_img);

$('drawArea').appendChild(uc_div);

Hoffe du kannst damit was anfangen. Hab ich echt schon so ziemlich alles mit probiert was mir eingefallen is. Irgendwo hakt's aber am Ende immer...