html – 在flexbox中对齐行中心对齐

概述目前我正在尝试使用flexbox将我的列设置为中心,但是当我调整浏览器大小时它会粘在左侧.我已经尝试过对齐内容中心和对齐项目中心,但我可能不会将它们放在正确的位置.如果有人知道如何解决这个问题将非常感激！谢谢！ .wrap{ display:flex;}main{ flex:1; display:flex;}aside, article{ padding:2em; } 目前我正在尝试使用flexBox将我的列设置为中心,但是当我调整浏览器大小时它会粘在左侧.我已经尝试过对齐内容中心和对齐项目中心,但我可能不会将它们放在正确的位置.如果有人知道如何解决这个问题将非常感激！谢谢！

.wrap{	display:flex;}main{	flex:1;	display:flex;}asIDe,article{    padding:2em;	}asIDe{	flex:1;}article{	flex:1;}@media (max-wIDth: 800px) {  main {    flex-direction: column;  }}

<div >    <main>        <asIDe>            <h1>Do You Want to...</h1>            <ul>                <li>Rebrand myself online</li>                <li>Take my current website and make it modern</li>                <li>Find a way to make information more accessible for customers</li>                <li> Improve customer service</li>                <li> Reach a wIDer range of people</li>            </ul>        </asIDe>        <article>            <h1>Do You Want to...</h1>            <ul>                <li>Create forms and documents that customers can fill out online</li>                <li>Start an email List for recurring customers</li>                <li>Show relatability with my audIEnce</li>                <li> Have 24/7 online exposure</li>                <li>Create a map or a way for customers to find my location</li>            </ul>        </article>    </main></div>

解决方法 要在移动视图上居中堆叠列,请使用align-items：center on main.对于桌面视图,您可以通过指定flex：0 auto来折叠列.这表示不应允许该项目增长,并应使用自动宽度.然后将justify-content：center添加到main以使折叠列居中.

.wrap{	display:flex;	}main{	flex:1;	display:flex;	justify-content: center;}asIDe,article{padding:2em;	}asIDe{	flex:0 auto;}article{	flex:0 auto;}@media (max-wIDth: 800px) {  main {    flex-direction: column;    align-items: center;  }}

<div ><main><asIDe>	<h1>Do You Want to...</h1>    <ul>  <li>Rebrand myself online</li>  <li>Take my current website and make it modern</li>  <li>Find a way to make information more accessible for customers</li>  <li> Improve customer service</li>  <li> Reach a wIDer range of people</li></ul></asIDe><article><h1>Do You Want to...</h1><ul>  <li>Create forms and documents that customers can fill out online</li>  <li>Start an email List for recurring customers</li>  <li>Show relatability with my audIEnce</li>  <li> Have 24/7 online exposure</li>  <li>Create a map or a way for customers to find my location</li></ul></article></main></div>

总结

以上是内存溢出为你收集整理的html – 在flexbox中对齐行中心对齐全部内容，希望文章能够帮你解决html – 在flexbox中对齐行中心对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。