[Erledigt] Blockelemente zentrieren durch übergeordneten Container

Chriz · 11.02.2011, 12:35

Hallo,

sagt mal wie zentriere ich - als ganzes - ein oder mehrere Blockelemente, die nebeneinander stehen?

Stellt euch eine Liste von Mitarbeitern ("Untergebene") vor. Die Darstellung ist Bild, daneben Name + Team, als Blockelement. Maximal 3 dieser Blockelemente können nebeneinander stehen. Gibt es weniger pro "Zeile", sollen diese zwei oder dieser eine Mitarbeiter zentriert werden.

float geht nicht, da es kein float:center gibt. Ich hab es jetzt sehr kompliziert mit PHP gelöst:

PHP-Code:

  <?php
$u1 = new User();
$inferiors->push($u1);
$u2 = new User();
$inferiors->push($u2);

$count = $inferiors->count();
foreach ($inferiors as $index => $inferior):
    $open  = ($index % 3 == 0);
    $close = ($index % 3 == 2) || ($index + 1 == $count);
    $size  = $open && ($rest = (min($index + 3, $count) - $index)) ? $rest : $size;
    #Gf_Debug::stop($index, $count);
    
    if ($open):
?>
    <div style="margin:0 auto;width:<?php echo $size * 33 ?>%;border:1px solid green">

<?php 
    endif;
?>
        <div style="float:left;width:<?php echo 99 / $size ?>%;border:1px solid red">
            <?php echo $inferior->toHtmlPreview()?>
        </div>
        
<?php 
    if ($close):
?>
    </div>
    
<?php
    endif;
endforeach;
?>

Das berechnet pro "Zeile" die Anzahl der Einträge ($size), setzt den äußeren Container auf 33 * $size Prozent und die inneren Container anteiligt daran auf die Breite (bei $size = 1 auf 100%, bei 2 = 50%, bei 3 = 33%)

Code:

1: __X__

2: _X_X_

3: X_X_X

4: X_X_X
   __X__

5: X_X_X
   _X_X_

usw.

Geht das nicht einfacher mit HTML/CSS-only?

ChrisB · 11.02.2011, 12:54

display:inline-block, Zentrierung über text-align.

Chriz · 11.02.2011, 13:58

Danke, klappt!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Mehrere DIV Container mit einem Klick ändern (mit mehreren Request Aufrufe	Lebenssonde	JavaScript, Ajax und mehr	11	26.08.2010 09:01
Netz von Objekten mit Abhängigkeiten darstellen/zeichnen	serPHPico	PHP-Fortgeschrittene	12	25.08.2010 18:52
Inhalt von Div zentrieren:	Paul.Schramenko	HTML, Usability und Barrierefreiheit	11	26.04.2010 14:51
kürzeren div container authoatisch der höhe des contends anpassen	litterauspirna	HTML, Usability und Barrierefreiheit	15	29.07.2009 00:57
2 div Container immer gleich lang	Kein Genie	HTML, Usability und Barrierefreiheit	4	27.07.2009 13:38
Links vom Untermenü in Container öffnen	Surfer	PHP Tipps 2008	0	27.12.2008 19:24
[Erledigt] Zentrieren von a Blocks im DIV Container	Daniel	HTML, Usability und Barrierefreiheit	21	24.09.2008 09:37
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
[CSS] Div container unsichtbar machen	I-Spy	HTML, Usability und Barrierefreiheit	24	05.03.2006 09:37
Vertikal zentrieren mit CSS - so gehts.		HTML, Usability und Barrierefreiheit	2	02.03.2006 09:15
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18
&lt;div&gt;- container vertikal auf seite zentrieren		HTML, Usability und Barrierefreiheit	3	08.05.2005 11:16

11.02.2011, 12:35
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	[Erledigt] Blockelemente zentrieren durch übergeordneten Container Hallo, sagt mal wie zentriere ich - als ganzes - ein oder mehrere Blockelemente, die nebeneinander stehen? Stellt euch eine Liste von Mitarbeitern ("Untergebene") vor. Die Darstellung ist Bild, daneben Name + Team, als Blockelement. Maximal 3 dieser Blockelemente können nebeneinander stehen. Gibt es weniger pro "Zeile", sollen diese zwei oder dieser eine Mitarbeiter zentriert werden. float geht nicht, da es kein float:center gibt. Ich hab es jetzt sehr kompliziert mit PHP gelöst: PHP-Code: <?php $u1 = new User(); $inferiors->push($u1); $u2 = new User(); $inferiors->push($u2); $count = $inferiors->count(); foreach ($inferiors as $index => $inferior): $open = ($index % 3 == 0); $close = ($index % 3 == 2) \|\| ($index + 1 == $count); $size = $open && ($rest = (min($index + 3, $count) - $index)) ? $rest : $size; #Gf_Debug::stop($index, $count); if ($open): ?> <div style="margin:0 auto;width:<?php echo $size * 33 ?>%;border:1px solid green"> <?php endif; ?> <div style="float:left;width:<?php echo 99 / $size ?>%;border:1px solid red"> <?php echo $inferior->toHtmlPreview()?> </div> <?php if ($close): ?> </div> <?php endif; endforeach; ?> Das berechnet pro "Zeile" die Anzahl der Einträge ($size), setzt den äußeren Container auf 33 * $size Prozent und die inneren Container anteiligt daran auf die Breite (bei $size = 1 auf 100%, bei 2 = 50%, bei 3 = 33%) Code: 1: __X__ 2: _X_X_ 3: X_X_X 4: X_X_X __X__ 5: X_X_X _X_X_ usw. Geht das nicht einfacher mit HTML/CSS-only? __________________ "Nuschel ich?" - "Was?"


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

11.02.2011, 12:54
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	display:inline-block, Zentrierung über text-align. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

11.02.2011, 13:58
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Danke, klappt! __________________ "Nuschel ich?" - "Was?"