尝试在包装器 div 中居中对齐元素和 divs
Trying to center align elements and divs inside a wrapper 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;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 3;
position: absolute;
}
#left-aside {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-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>
<section><!-- Main part of your page -->
<h1>Main Section with two articles</h1>
<article class="first"><!-- Informational section & can use multiple times -->
Article 1
</article>
<!-- Slideshow -->
<article class="second"><!-- Informational section & can use multiple times -->
Article 2
</article>
</section>
<aside>
Aside
</aside>
</div>
我试图将我的元素和 divs 在我的包装 div 中居中对齐，我已经尝试过：
text-align: center
margin: 0 auto
但是 none 似乎可以工作，因为我在我的 css 中使用 moz-box 和 webkit-box，但这些中心对齐的 none parent 中的 child。我这辈子都做不到，我也试过：
justify-content: center
align-items: center
然而 none 居中对齐 parent 它卡在屏幕左侧。
请注意，如果我要删除：
display: -moz-box;
display: -webkit-box;
来自 parents 和 child 元素，然后我可以轻松对齐所有内容，但是我将失去页面的响应能力，我正在尝试将其设为 cross-platform尽可能友好。
#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;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 3;
position: absolute;
}
#left-aside {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 1;
max-width: 100%;
}
.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>
<section><!-- Main part of your page -->
<h1>Main Section with two articles</h1>
<article class="first"><!-- Informational section & can use multiple times -->
Article 1
</article>
<!-- Slideshow -->
<article class="second"><!-- Informational section & can use multiple times -->
Article 2
</article>
</section>
<aside>
Aside
</aside>
</div>
好的，我之前将之前的答案标记为正确，尽管它起作用了，但它在包装器 div 的剩余使用中提供了 div 100% 的宽度，并且没有完全响应，这留下了很多空格，并不是真正的跨浏览器支持。因此，为了将其完全集中在包装器 div 中并具有响应能力，我必须将以下代码行输入父级 div.
display: flex;
justify-content: center;
align-items: center;
这完美地对齐了父级内部的所有内容，具有完全的响应能力。
#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;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 3;
position: absolute;
}
#left-aside {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-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>
<section><!-- Main part of your page -->
<h1>Main Section with two articles</h1>
<article class="first"><!-- Informational section & can use multiple times -->
Article 1
</article>
<!-- Slideshow -->
<article class="second"><!-- Informational section & can use multiple times -->
Article 2
</article>
</section>
<aside>
Aside
</aside>
</div>
我试图将我的元素和 divs 在我的包装 div 中居中对齐，我已经尝试过：
text-align: center
margin: 0 auto
但是 none 似乎可以工作，因为我在我的 css 中使用 moz-box 和 webkit-box，但这些中心对齐的 none parent 中的 child。我这辈子都做不到，我也试过：
justify-content: center
align-items: center
然而 none 居中对齐 parent 它卡在屏幕左侧。
请注意，如果我要删除：
display: -moz-box;
display: -webkit-box;
来自 parents 和 child 元素，然后我可以轻松对齐所有内容，但是我将失去页面的响应能力，我正在尝试将其设为 cross-platform尽可能友好。
#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;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 3;
position: absolute;
}
#left-aside {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
order: 1;
max-width: 100%;
}
.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>
<section><!-- Main part of your page -->
<h1>Main Section with two articles</h1>
<article class="first"><!-- Informational section & can use multiple times -->
Article 1
</article>
<!-- Slideshow -->
<article class="second"><!-- Informational section & can use multiple times -->
Article 2
</article>
</section>
<aside>
Aside
</aside>
</div>
好的，我之前将之前的答案标记为正确，尽管它起作用了，但它在包装器 div 的剩余使用中提供了 div 100% 的宽度，并且没有完全响应，这留下了很多空格，并不是真正的跨浏览器支持。因此，为了将其完全集中在包装器 div 中并具有响应能力，我必须将以下代码行输入父级 div.
display: flex;
justify-content: center;
align-items: center;
这完美地对齐了父级内部的所有内容，具有完全的响应能力。