zentrierten text rechtsbündig anzeigen

[rasputin]

ausgangslage: mehrere bilder mit text darunter werden vertikal angeordnet und zentriert (siehe angang linke seite). der text sollte aber linksbündig sein, als ganzes dennoch zentriert unter dem bild (anhang rechts seite).
wie kriege ich das hin?

 

[tobi2]

Wie sieht denn das HTML aus?
Oder bist da völlig frei?

Ich würde unter jedem Bild ein DIV zentrieren und dessen Inhalt linksbündig ausrichten. In dieses DIV dann die Texte einfügen.

css
.container {
  text-align: center;
}
.textcontainer {
  text-align: left;
  margin-left:auto;
  marign-right: auto;
}
html
<div class="container">
<img src="" />
<div class="textcontainer">
qwertz
qwertz
qwertz
</div>
</div>

aber vielleicht habe ich das auch falsch verstanden?

 

[rasputin]

das klappt eben nicht. dann klebt der text nämlich ganz links, da das <div> eine breite von 100% hat.

 

[tobi2]

Dann halt das Bild noch mit in das innere Div packen. Danach kannsr Du ja die margins des inneren Divs vergrößern und schiebst damit immer Text und Bild gleichmässig.

Und falls Du ne HTML vorlage hast, einfach diese mal posten. Weiß ja nicht, was da noch so drumherum passiert.

 

[rasputin]

das problem nochmals formuliert: ich möchte unter einem zentrierten bild eine ebenfalls zentrierte box. in der box befinden sich drei zeilen text, welcher innerhalb der box links ausgerichtet ist. die box ist so breit wie die längste textzeile.

	<div class="paddingbox contentbox">
		{foreach from=$random_images item=random_image name=image_loop}
	   
         <div style="margin-bottom:12px; text-align:left; margin:auto auto;">
         	<a href="detail.php?location={$random_image.location_id}"><img src="image.php?action=t&img={$random_image.image_name}" width="100" height="100" style="margin: 0px 4px; padding: 4px;" /></a><br />
         
         
				<a href="detail.php?location={$random_image.location_id}">{$random_image.location_name}</a><br />
				<a href="area.php?area={$random_image.area_ID}">{$random_image.area_name}</a><br /> 
				{$random_image.country_name} <img src="images/flags/png/{$random_image.country_code}.png" style="margin-left:4px;" width="16" height="11" alt="{$random_image.country_code}" />
			</div>
                        
		{/foreach}
	</div>

div.paddingbox {
	padding: 8px;
}

div.contentbox {
	background: #fff;
	margin-bottom: 8px;
}

 

[tobi2]

Die Frage ist, ob der Text nur maximal so breit, wie das Bild sein darf oder ob der Text nur links mit dem Bild fluchten soll?

In letzterem Fall müßtest Du ja "nur" ein linkes Padding im unteren Div einstellen.
Im anderen Fall mußt Du irgendwie die Abhängigkeit der Breiten setzen. Entweder in Deiner Serverseitigen Sprache die Bildgröße als Breite für das Textdiv setzen etc.

 

[rasputin]

Die Frage ist, ob der Text nur maximal so breit, wie das Bild sein darf oder ob der Text nur links mit dem Bild fluchten soll?

der text kann auch breiter als das bild werden. es müsste doch eine elegante lösung mit css geben?

 

[tobi2]

der text kann auch breiter als das bild werden. es müsste doch eine elegante lösung mit css geben?

Dann ist doch aber Dein jetziges Problem "nur" noch, dass er links nicht mit dem Bild abschließt (Siehe Dein Screenshot aus Beitrag #3). Das kannst Du doch aber mit einem Padding auf der linken Seite des Textdivs lösen, oder nicht?