Zentrieren von mehreren <div>'s einer <section> mit @media und max-width

GastBenutzer · #1 (**permalink**) 12.05.2016, 15:11

Hallo,
ich versuche schon seit 3 Tagen 6 <div>'s, wenn

Code:

@media only screen and (max-width: 900px){}

zutrifft in "Pärchen" anzeigen zulassen. Das gelingt mir auch mit

Code:

@media only screen and (max-width: 900px){
    .item {
       width: 49.99999%;
       max-width:325px;
    }
}

Achso, was vielleicht noch wichtig ist zu erklären: Die <section> hat die id="content" und die jeweiligen <div>'s die class="item".
Allerdings sind die <div>'s nicht mehr zentriert, wie sie es im "normalen" Zustand sind. Hier der Code dafür:

Code:

#content {
    max-width: 1200px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
    text-align: center;
    display: inline-block;
}

.item {
    padding: 0 6px;
    float: left;
    width: 33.333333%;
}

Hat jemand vielleicht eine Erklärung oder Lösung für mein Problem? Danke

cloned · #2 (**permalink**) 12.05.2016, 16:04

Wozu benötigst du hier denn position:absolute? Das wird zwar von Anfängern gerne verwendet, ist aber in 99.9% der Fälle unsinnig.

Du möchtest nicht zentrieren, sondern nebeneinander anzeigen? Wieso nicht mit flexbox arbeiten? Und was genau funktioniert nicht? Inwiefern sind sie in der normalen Version zentriert?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit CSS Menü	FuFi	CSS	1	05.01.2015 15:46
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Media Querys - Layout geht wird über den Displayrand angezeigt	DarkNemesis84	CSS	9	05.05.2013 22:00
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße	Spencer	Javascript & Ajax	3	18.09.2012 23:16