-1
Der Versuch, zum Zentrum Elemente und divs div
#wrapper {
display: inline-block;
margin: 0 auto;
width: 100%;
display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-flex: 1;
}
section {
max-width: 760px;
margin-top: 20px;
background-color: #121516;
border-radius: 50px;
padding: 10px;
box-shadow: 5px 5px 10px 10px #000;
display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
-webkit-box-orient: vertical;
-webkit-box-flex: 2;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 2;
text-align: center;
}
aside {
border-radius: 20px;
margin-top: 15px;
padding: 5px;
color: #5F7278;
width: auto;
float: right;
font-size: 85%;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
\t \t -moz-box-orient: vertical;
\t \t -moz-box-flex: 1;
order: 3;
position: absolute;
}
#left-aside {
\t display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
\t \t -moz-box-orient: vertical;
\t \t -moz-box-flex: 1;
order: 1;
max-width: 150px;
}
.box1 {
width: auto;
max-width: 800px;
height: auto;
padding: 16px;
border-right: 1px solid #000;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
line-height: 20px;
flex: 1;
margin: 0px;
}
.box2 {
width: auto;
max-width: 300px;
float: left;
margin-left: 40px;
margin-bottom: 40px;
padding: 14px;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
line-height: 25px;
flex: 1;
}
.box3 {
width: auto;
max-width: 300px;
float: right;
margin-right: 40px;
padding: 14px;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
line-height: 23px;
flex: 1;
}
.box4 {
width: auto;
padding: 16px;
padding-bottom: 1px;
margin-left: 20px;
margin-bottom: 10px;
border-right: 1px solid #000;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
line-height: 22px;
flex: 1;
}
.box4 a {
font-size: 1.2em;
}
.box5 {
width: auto;
margin-top: 20px;
padding: 16px;
margin-bottom: 10px;
border-right: 1px solid #000;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
flex: 1;
}
.box5 p {
max-width: 500px;
margin: 0 auto;
line-height: 20px;
}
.box5 form {
margin-top: 20px;
}
.box6 {
width: auto;
max-width: 660px;
height: auto;
padding: 16px;
border-right: 1px solid #000;
border-radius: 20px;
box-shadow: 15px 15px 15px #000 inset;
line-height: 20px;
flex: 1;
margin-left: 40px;
clear: both;
}<div id="wrapper">
<div id="left-aside">
Left aside
</div>
\t \t <section><!-- Main part of your page -->
\t \t \t \t <h1>Main Section with two articles</h1>
\t \t \t \t \t <article class="first"><!-- Informational section & can use multiple times -->
Article 1
\t \t \t \t \t \t
\t \t \t \t \t </article>
\t \t <!-- Slideshow -->
\t
\t
\t \t \t <article class="second"><!-- Informational section & can use multiple times -->
\t \t \t \t
\t \t \t \t Article 2
\t \t
\t \t \t </article>
\t \t </section>
\t \t <aside>
\t \t
Aside
</aside>
\t </div>Ich versuche, in einem Wrapper ausrichten zu zentrieren meine Elemente und divs in meinem Wrapper div align, die ich versucht habe:
text-align: center
margin: 0 auto
Aber keiner scheint zu funktionieren, da ich die moz-box und die webkit-box in meinem css benutze, aber keiner dieser zentriert die childs im elter. Ich kann nicht für das Leben von mir diese an der Arbeit, ich habe auch versucht:
justify-content: center
align-items: center
Doch nichts davon Zentrum richtet in der Mutter es auf der linken Seite des Bildschirms steckt.
Als Hinweis, wenn ich das entfernen war:
display: -moz-box;
display: -webkit-box;
von den Eltern und Kind-Elemente dann kann ich leicht ausrichten werde ich verlieren die Ansprechempfindlichkeit von der Seite alle, aber und ich versuche zu Mach es so plattformübergreifend wie möglich.
können Sie das entsprechende Code-Snippet posten? – MyStream
Entschuldigung Ich bin ein Noob Wie würde ich ein Snippet hochladen? – Ricky
Im Fenster Frage bearbeiten/erstellen befindet sich ein Symbol rechts neben dem Bildsymbol. Wenn Sie darauf klicken (die 7. von links), erhalten Sie ein Popup-Fenster/Overlay, in dem Sie Beispielcode hinzufügen können. – MyStream