[Erledigt] Inhalt in einem dreispaltigen Spaltenbereich zentriert ausgeben

Hallo Forum,

ich bin gerade daran, eine Website zu überarbeiten und möchte in einem dreispaltigen Spaltenbereich den Inhalt jeweils zentriert ausgeben. Hier befindet sich die Testseite dazu. Betroffen ist der Content unten. Da ich absolut keinen Plan dazu habe, bin ich auf die Hilfe des Forums angewiesen.

Verwendet wird das Flex-Layout Juneau.

Besten Dank.

Gruss Claudio

Moin,

das kannst Du bspw. mit dem Rahmen erschlagen.

LG, Thomas

Danke Thomas für den Input. Eine Kombination zwischen Rahmen und Innenabstand führt zum Ziel. Was sich aber nicht ändert ist die Ausrichtung im Layout des Smartphone. Gibt es hier auch eine Möglichkeit??

Claudio

Hi nochmal,

ich vergesse immer wieder, dass dieses SchXXss-Programm u.a. Rahmen im "smartphone-design" ignoriert. Da musst Du Dir tatsächlich pro Zeile mit html- oder css-Anweisungen helfen.

LG, Thomas

mit html oder css scheitere ich gleich zweimal
Da wo der Absatz eine Grafik ist habe ich es mit folgendem Code versucht

1

<img src="./images/pictures/56800954/logo_jugendfeuerwehr.jpg" alt="ein Bild" style="text-align:center"/>

Das Bild erscheint zwar aber nicht zentriert wie ich gehofft habe mit dem text-align:center. Beim html Absatz vom Wetter bin ich ganz ratlos.

Gruss Claudio

 <div class="paragraph" style="text-align:center">

    <img src="./images/pictures/56800954/logo_jugendfeuerwehr.jpg" alt="ein Bild" />

</div>

Mit text-align wird der Inhalt eines Continers ausgerichtet, in deinem Fall das Bild.

Danke für den Input. Das Ergebnis beim Bild ist wie gewünscht und auch bei der Smartphone Version zentriert. So hätte ich die ersten 50% gelöst. Eventuell hat noch jemand einen Tipp für den html Absatz wo das Wetter drin ist.

Wenn die Breite des zu zentrierenden Elements definiert ist, kannst du margin: auto; verwenden.

Für moderne Browser gibt es eine einfache  Möglichkeit, beliebige Elemente zu zentrieren. Ich machs an einem Beispiel-Selektor:

.zentrieren {

  position:relative;

  left: 50%;

  transform: translateX(-50%);

}

<div class="zentrieren">

«beliebiger Inhalt»

</div>

Das müßte helfen:

<div style="margin: auto; text-align: center;">
 
	... Wetter HTML-Code ...
 
</div>

Viel Erfolg!

Das war eine parallele Punktlandung.

Doppelt genäht hält besser!!!

Nun habe ich beide Vorschläge drin (hoffentlich auch richtig eingebaut) sehe aber bei beiden Lösungen keine Veränderung. Danke für Eure Hilfe.

Ich bin mir nicht sicher, ob dein oben angegebener Link die aktuellen Änderungen zeigt. Wenn ja, was willst du konkret zentrieren?

Ich sehe zwei Blöcke, ein "Suche" und darunter ein Eingabefeld (Ort bzw. PLZ) und "mehr Wetter auf" und darunter ein Button.

Sollen die beiden Blöcke zentriert sein und übereinander liegen? Wenn ja, was soll oben und was unten liegen?

Ich habe im Moment zwei Blöcke drin da ich einmal die Variante von dir getestet habe und einmal den Code von Volker eingesetzt habe. Endziel ist es das Wetter Element einmal zentriert (horizontal) anzeigen zu lassen, egal mit welchem Code.

<div style="margin: auto; text-align: center;"> ... </div>

kannst wieder entfernen.

Wenn du mit margin:auto; arbeiten willst,  schreib es hier rein:

<div id="wettercom-button-1ee9548ef1a2d15b374a4b284525f81e" style="margin: auto; text-align: center;">....</div>

Da du eine Breitenangabe verwendest, reicht die margin:auto-Methode aus.

@Murli:

Du solltest deutlich herausstellen, daß Du den mobilen Ansichtsmodus unter der URL http://www.tscharner-feldis.ch/test_1/?nglayout=mobile meinst.

Das ist ja nicht jedem sofort klar.

Und krenovativ hat natürlich Recht.

Besten Dank an alle!! Der letzte Hinweis war der entscheidend .