在 Flexbox 中居中不起作用。啥是高度、宽度、显示和位置要求？我错过了啥？ [复制]
Posted
技术标签:
【中文标题】在 Flexbox 中居中不起作用。啥是高度、宽度、显示和位置要求？我错过了啥？ [复制]【英文标题】：Centering in Flexbox not working. What are height, width, display, and position requirements? What am I missing? [duplicate]在 Flexbox 中居中不起作用。什么是高度、宽度、显示和位置要求？我错过了什么？ [复制] 【发布时间】：2018-05-15 08:15:18 【问题描述】：好的，我正在为 WP 中的博客存档页面设置样式，但遇到了 flexbox 问题。
我已经检查了许多类似的问题，但我似乎无法对我做错的事情做出正面或反面。
编辑：这已被标记为重复。虽然这个网站上确实有很多帖子详细说明了人们在使用 flexbox 来居中时遇到问题，但这些解决方案对我不起作用，而且我认为这是我的代码的一些具体问题。
这就是为什么我在标题中明确询问 flexbox 是否有高度、宽度、显示或位置要求才能正常运行的原因之一，因为我使用的是最小宽度和最小高度，而不是明确的宽度和高度，而且我从其他一些可能是问题的一部分的帖子中思考，但我找不到弹性盒规范中详细说明该行为的部分。
这是一个带有我的代码的代码笔。
https://codepen.io/thedonquixotic/pen/yPGPmj
这是代码本身：
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
section.blog-post-section
width: 100%;
position: relative;
min-height: 450px;
overflow: hidden;
z-index: 2000;
padding: 0px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
a
height: 100%;
width: 100%;
text-decoration: none;
z-index: 5000;
cursor: pointer !important;
display: flex;
flex: 1;
div.overlay
position: absolute;
z-index: 3000;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5));
//end overlay container
div.img-container
position: absolute;
display: flex;
min-width: 50%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
img.section-img
position: relative;
min-width: 100%;
min-height: calc(100% + 200px);
z-index: 2000 !important;
filter: blur(2px);
top: -100px;
right: 0;
margin: 0 auto;
svg
float: right;
background-color: black;
//end image container
div.title-card-flex
padding: 50px;
position: absolute;
height: 100%;
width: calc(50% - 100px);
flex-direction: column;
justify-content: left;
align-items: flex-start;
z-index: 4000;
background: white;
h1
position: relative;
background-color: black;
font-family: 'AllerBold', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
max-width: 90vw;
margin: 50px 10px 25px 50px;
padding: 10px;
z-index: 4000;
user-select: none;
cursor: pointer !important;
font-size: 3.5vmax;
font-size: 25px;
p.blog-summary
display: block;
position: relative;
padding: 5px;
margin: 25px 10px 45px 50px;
font-family: 'Aller', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
z-index: 4000;
user-select: none;
cursor: pointer !important;
line-height: 1.4;
font-size: 18px;
margin-bottom: 10px;
span
background-color: black;
box-shadow: 0.2em 0 0 rgba(black, 1), -0.2em 0 0 rgba(black, 1);
display: inline;
//svg
// float: right;
// background-color: black;
//
section.blog-post-section:nth-child(even)
div.img-container
right: 0px;
section.blog-post-section:nth-child(odd)
div.title-card-flex
right: 0px;
【问题讨论】：
您的实际问题是什么？哪个元素应该居中？你试过什么？ 你到底想集中什么？它应该水平还是垂直居中？ @actc 我正在尝试将图像居中放置在图像容器内。问题是它基于整个页面而不是基于应该包含它的图像容器居中。 @UncaughtTypeError 当我使用 justifycontent 和 align items center 时，我认为它会传达我试图将两者居中，但我应该更明确。看来我应该在我的原始帖子中加入更多解释。抱歉，不清楚。 你说得对，这个网站上有很多关于如何使用 flexbox 水平和垂直居中的帖子，每个帖子平均有几个不同的答案。没有办法问一个关于如何用今天可用的 CSS 属性来居中的问题，这个问题在这里还没有被回答过十几次。至于你的情况，反正你也没有提供 MCVE，所以即使你提出了一个新奇的问题，也没有被正确地问到。 【参考方案1】：/*
* hor align
*/
align-items: center;
/*
* vertical align
*/
justify-content: center
也许你想要这样的东西。
https://codepen.io/dakata911/pen/QOzQoj
【讨论】：
是的，这就是我想要的效果，但我试图避免使用后台 url css 解决方案，因为这与 WP post field 系统不兼容。我想我可能最终会使用这个解决方案，因为我有点不知所措。 codepen.io/dakata911/pen/QOzQoj?editors=1100 fix ---> 它使用图像标签:) 哦，亲爱的，谢谢 Yordan，这是一个比我尝试做的更优雅的解决方案。而且它看起来适合对象，现在有不错的浏览器支持！ 实际上看起来对象拟合对我不起作用，原因有几个。主要问题是 object-fit:fill 会挤压图像，而 object-fit:contain 不会显示图像的全尺寸并允许溢出，这更是一个问题，因为我要添加视差到这些。该死，这是一个很好的尝试！ 好吧，实际上也许封面会起作用。不过仍然不确定它会如何与视差交互。以上是关于在 Flexbox 中居中不起作用。啥是高度、宽度、显示和位置要求？我错过了啥？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]
空白：nowrap；并且 flexbox 在 chrome 中不起作用