flexbox div文本不与子元素对齐

Posted 2023-03-05

【中文标题】flexbox div文本不与子元素对齐

【英文标题】：flexbox div text not align inline with child element

【发布时间】：2022-01-23 15:08:33

【问题描述】：

考虑以下 sn-p：

div 
  display: flex;
  flex: 0 0 45%;
  max-width: 45%;

<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>

目前看起来像 enter image description here

但我想对齐 enter image description here

【问题讨论】：

永远不要让你的文本容器成为 flexbox 容器：dev.to/afif/…

不使用 flex 也可以做到。

【参考方案1】：

你可以用另一个 div 包裹起来。

.wrapper     
    max-width: 45%;
    display: flex;
    flex: 0 0 45%;

<div class="wrapper">
  <div>
    Lorem ipsum dolor sit amet, <strong >dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
  </div>
</div>

.flex-container     
    max-width: 45%;    
    flex: 0 0 45%;    
    display: flex;

.flex-container div 
  background: gray;
  padding: 10px;
  margin: 10px;

.w     
   color: green;
  position: relative;

<div class="flex-container">
  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>

  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>
</div>

【讨论】：

谢谢 Maik，它正在工作，但我在页面上有很多这样的元素，我需要使用 CSS 进行调整，另一个解决方案是我可以更改显示属性。但我正在寻找 flex 属性是否有任何可能的解决方案。

@Milind 我想不出任何你应该这样做的场景。 Display: flex 用于影响子元素的包装器。我已经更新了我的答案以明确表示。

【参考方案2】：

你不需要 flex 来使 div 居中。您可以使用margin 执行此操作。检查以下代码 sn-p。

div 
    background:gray;
    width:45%;
    margin-left:auto;
    margin-right:auto;

<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>

【参考方案3】：

div 
    float: left;
    max-width: 45vw;