Bild im Inhalt zentrieren

    Huhu,


    ich versuche gerade Bilder in meinen Inhalt einzubauen, das funktioniert bis jetzt auch ganz gut, nur habe ich jetzt ein Problem.


    Ich möchte jetzt zwischen 2 <p>-Tags ein Bild setzen, darüber und darunter Text, links und rechts nicht und dieses Bild soll zentriert angezeigt werden, is jetzt sieht das so aus:


    Code
    <p>Text</p>
    <a href="http://www.html-seminar.de" target="_blank">
      <img src="img/content/cont3.jpg" title="Vielen Dank f&uuml;r die Bereitstellung des Bildes an www.html-seminar.de" class="center" />
    </a>  
  <p>Text</p>


    Code
    div#mainCont img.center {
  max-width: 480px;
}


    Wohl erwähnenswert: die Breiten der Bilder variieren.


    Wie bekomme ich das denn jetzt zentriert? :roll:


    Edit:


    Habe jetzt den Link außen herum zum Blockelement gemacht und text-align: center; gesetzt, das finde ich persönlich aber nicht gut weil ich den Link nicht immer da haben werde, das muss doch auch ohne Extra Element drum herum gehen ... :roll:

    Dann mach doch einfach aus dem <img /> ein Block-Element und zentriere das wie du jedes Block-Element zentrierst, margin: 0 auto;*
    Ansonsten wäre es Sematisch sowieso richtiger, wenn das <img /> in einem <p> sitzen würde^^


    * Ich bin mir gerade nur nicht so sicher, wie sich dann das Bild verhält :/
    Beziehungsweise wenn du das Bild vorher nicht zu einem Block machst, was der IE dann dazu sagt :S
    Ich empfehle dir eigentlich das Bild in ein <p> zu stecken^^

    Eigentlich ne gute Idee aber ich hab ja dem Bild noch max-width: 480px; zugewiesen, daher habe ich diese Klasse ja eh definiert warum dann für den <p> noh eine Klasse erstellen? habe mal gezählt das ist eine Zeile mit einem } drin und ein mal class="imgHolder" mehr als die Variante das Bidl zum Block zu machen, *kleinlich werd* :roll:


    Ich halte es für angebracht das Bild an sich zu zentrieren und nicht den Inhalt des Paragraphen.


    Vielen dank für deine Denkanregung und Unterstützung :wink:

    Dann werden wir doch nun mal etwas Philosophisch :D
    Aber wie sinnvoll ist es, wenn du nur das Bild zentrieren willst dieses vom Grund auf zu verändern?
    Ist es nicht sinnvoller die Umgebung ein wenig zu verändern, damit das Bild sich selbst findet? :D


    Und wenn wir dem Bild keine Klasse geben sondern dem <p> brauchen wir nur ein text-align:center;.
    Das <img /> braucht dann kein display: block; und keinerlei Breiten-Angabe :D

    Zitat von &quot;Sarkkan&quot;

    Das <img /> braucht dann kein display: block; und keinerlei Breiten-Angabe :D


    Also ich denke schon weil es könnte so wie ich das sehe 500px breit werden darf aber nur 480 ;)


    Weißt du schau doch einfach mal hier:


    Bilder links und rechts von Text umflossen
    Bild ohne Textfluss zentriert


    Schau auch mal bitte bei dem zentrierten, ich verstehe nicht warum der Link jetzt den ganzen Paragraph einnimmt und nicht nur das Bild. :roll:

    Folgendes (deswegen bin ich ja auch für meine <p>-Zentrier-Geschichte :D)
    Ein Blockelement nimmt immer 100% der verfügbaren Breite ein.
    Durch max-width,.. können wir dies natürlich nun alles ein wenig einschrenken, aber bei dir hat das Bild so oder so 480px zur verfügung ergo nimmt es sich den Platz auch.
    Legen wir nun einen Link um das Bild, welches sich 100% breite nimmt, so muss auch der Link diese 100% breite einnehmen, da er sich ja um das Bild legt.
    Würden wir nun unser Bild nicht mehr zu einem block-Element machen nimmt es nur so viel Platz ein, wie es braucht und so auch der Link nur soviel wie das Bild braucht :D

    Ai ich habe ganz verdrängt das das Bild jetzt ja ein Block ist.. ich wieder :roll:


    Ja so kommt das manchmal das man seine eigenen Angelegenheiten nicht mehr versteht. :wink:

    Dafür gibt es ja dann andere Leute, die einen auf sowas hinweisen :D
    Auf der Arbeit hab ich das auch schon mal öfter, dass ich einfach mal wen anderes drüber schauen lasse, weil ich so Fehlerchen übersehe oder so :D

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden