[英]Displaying flexbox centered but align items left like text align left
I am trying to setup these divs to display in the centre but keep their items displayed left, like text-align: left
would do. 我试图设置这些div显示在中心,但保持他们的项目显示为左,如
text-align: left
会这样做。
Here's my example: https://jsfiddle.net/gr5Lmos1/ 这是我的例子: https : //jsfiddle.net/gr5Lmos1/
#donateList { display: flex; justify-content: center; align-items: center; align-self: center; flex-direction: column; flex-wrap: wrap; } .donateItem { flex: 0 1 auto; align-items: flex-start; justify-content: flex-start; align-self: center; } .donateItem * { display: inline-block; } .donateItem p { vertical-align: bottom; } .donateItem img { height: 64px; width: 64px; }
<div id="donateList"> <div class="donateItem"> <img src="/images/icons/bitcoin.png"> <p>Bitcoin:</p> <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> </div> <div class="donateItem"> <img src="/images/icons/paypal.png"> <p>Paypal:</p> <p>eijfhewfwifhefefewf</p> </div> </div>
I am trying to get the donateItem's contents to all display left but keep all the donateItem's divs centre as they are now. 我试图将donateItem的内容留给所有显示左边,但保留所有donateItem的div中心,就像现在一样。
If you are open to include another wrapper in your markup, it is easy: 如果您愿意在标记中包含另一个包装器 ,则很容易:
Use align-items: flex-start
(or let it take the default stretch
value) for the #donateList
对
#donateList
使用align-items: flex-start
(或让它采用默认的stretch
值)
Center align vertically and horizontally the new wrapper div. 中心垂直和水平对齐新的包装div。
See demo below (also removed some redundant styles): 请参阅下面的演示(也删除了一些冗余样式):
main { /* ADDED */ display: flex; align-items: center; justify-content: center; } #donateList { display: flex; justify-content: center; align-items: flex-start; /* CHANGED */ /*align-self: center;*/ flex-direction: column; flex-wrap: wrap; } .donateItem { flex: 0 1 auto; /*align-items: flex-start; justify-content: flex-start; align-self: center;*/ } .donateItem * { display: inline-block; } .donateItem p { vertical-align: bottom; } .donateItem img{ height: 64px; width: 64px; }
<main> <div id="donateList"> <div class="donateItem"> <img src="http://placehold.it/100x100"> <p>Bitcoin:</p> <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> </div> <div class="donateItem"> <img src="http://placehold.it/100x100"> <p>Paypal:</p> <p>eijfhewfwifhefefewf</p> </div> </div> </main>
You Have To Just Do This: 你必须这样做:
#donateList
{
margin: 0px auto;
width: 50%;
padding: 20px;
}
And Add display:flex;
并添加
display:flex;
in .donateItem
and .donateItem p
# in
.donateItem
和.donateItem p
#
#donateList { margin: 0px auto; width: 50%; padding: 20px; } .donateItem { flex: 0 1 auto; align-items: flex-start; justify-content: flex-start; align-self: center; display:flex; } .donateItem p { vertical-align: bottom; display:flex; } .donateItem * { display: inline-block; } .donateItem img { height: 64px; width: 64px; }
<div id="donateList"> <div class="donateItem"> <img src="http://icons.iconarchive.com/icons/froyoshark/enkel/96/Bitcoin-icon.png"> <p>Bitcoin:</p> <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> </div> <div class="donateItem"> <img src="http://axisj.com/assets/images/donate-how-paypal.png"> <p>Paypal:</p> <p>eijfhewfwifhefefewf</p> </div>
Here's a solution, but it's a bit hacky and the container width needs to be adjusted to the particular situation. 这是一个解决方案,但它有点hacky,容器宽度需要根据具体情况进行调整。 The container gets these settings for centering inside the body:
容器获取这些设置以在体内居中:
width: 50%;
margin: 0 auto;
overflow: visible;
white-space: nowrap;
...and the flex items get align-self: flex-start;
...和flex项目得到
align-self: flex-start;
for left-alignment inside the container: 对于容器内的左对齐:
#donateList { display: flex; justify-content: center; align-items: center; align-self: center; flex-direction: column; flex-wrap: wrap; width: 50%; margin: 0 auto; overflow: visible; white-space: nowrap; } .donateItem { flex: 0 1 auto; align-items: flex-start; justify-content: flex-start; align-self: flex-start; } .donateItem * { display: inline-block; } .donateItem p { vertical-align: bottom; } .donateItem img { height: 64px; width: 64px; }
<div id="donateList"> <div class="donateItem"> <img src="/images/icons/bitcoin.png"> <p>Bitcoin:</p> <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> </div> <div class="donateItem"> <img src="/images/icons/paypal.png"> <p>Paypal:</p> <p>eijfhewfwifhefefewf</p> </div> </div>
For modern browsers, changing items alignment to flex-start
and making the container as wide as the longest item via width: max-content
makes it possible to center it with usual margin:auto
: 对于现代浏览器,将项目对齐更改为
flex-start
并通过width: max-content
使容器与最长项目一样width: max-content
使得可以将其与通常的margin:auto
居中margin:auto
:
#donateList { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: max-content; margin: auto; } .donateItem { flex: 0 1 auto; align-items: flex-start; justify-content: flex-start; } .donateItem * { display: inline-block; } .donateItem p { vertical-align: bottom; } .donateItem img { height: 64px; width: 64px; }
<div id="donateList"> <div class="donateItem"> <img src="/images/icons/bitcoin.png"> <p>Bitcoin:</p> <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> </div> <div class="donateItem"> <img src="/images/icons/paypal.png"> <p>Paypal:</p> <p>eijfhewfwifhefefewf</p> </div> </div>
Unfortunately, the browser support of max-content
is far from ideal , so @kukkuz's solution with an extra wrapper is probably more practical (unless left alignment of the container is the acceptable graceful degradation for you). 不幸的是,浏览器对
max-content
支持远非理想 ,所以@ kukkuz的解决方案带有额外的包装可能更实用(除非容器的左对齐是可接受的优雅降级)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.