显示 flexbox 居中但像文本左对齐一样左对齐项目

Posted 2023-03-05

【中文标题】显示 flexbox 居中但像文本左对齐一样左对齐项目

【英文标题】：Displaying flexbox centered but align items left like text align left

【发布时间】：2018-03-16 03:10:37

【问题描述】：

我正在尝试将这些 div 设置为显示在中心，但保持它们的项目显示在左侧，就像 text-align: left 会做的那样。

这是我的例子：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>

我正在尝试将 donateItem 的内容全部显示在左侧，但将 donateItem 的所有 div 中心保持原样。

【参考方案1】：

如果您愿意在标记中包含另一个 包装器，这很容易：

对#donateList 使用align-items: flex-start（或让它采用默认的stretch 值）

居中对齐新的包装器 div。

参见下面的演示（也删除了一些冗余样式）：

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>

【讨论】：

这个不错，没想到要试试。我刚刚制作了一个新的包装器/容器来替换 main.

【参考方案2】：

这是一个解决方案，但它有点笨拙，并且需要根据特定情况调整容器宽度。容器获取这些设置以在主体内居中：

width: 50%;
margin: 0 auto;
overflow: visible;
white-space: nowrap;

...弹性项目在容器内左对齐得到align-self: flex-start;：

#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>

【参考方案3】：

你必须这样做：

#donateList
 
    margin: 0px auto;
    width: 50%;
    padding: 20px;

并在.donateItem 和.donateItem p# 中添加display:flex;

#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>

【参考方案4】：

对于现代浏览器，将项目对齐更改为flex-start 并通过width: max-content 使容器与最长的项目一样宽，从而可以将其与通常的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>

不幸的是，max-content 的浏览器支持是far from ideal，所以@kukkuz 的带有额外包装器的解决方案可能更实用（除非容器的左对齐是您可以接受的优雅降级）。