Question

有一个包含多个项目的菜单。每个项目都有一行内容，与其中心对齐。但是突然增加了一个带有两行内容的项目。

根据设计方案，这个两行item-contents-element仍然应该与父项的中心对齐，但是这个item-contents-element中的文本应该是左对齐的： how-it-should-look

此外，项目是响应式的，并且项目内容可能会针对此项目和其他项目进行更改 - 因此仅使用固定宽度的项目内容是不合适的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Align element wit multiline text to the center of parent block preserving left text-alignment</title>
        <style>
            .list-item {
              border: 1px solid #999;
              padding: 10px;
              text-align: center;
              width: 350px;
            }

            .item-contents {
              border: 1px dashed #999;
              display: inline-block;
              text-align: left;
              font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div class="list-item">
            <div class="item-contents">We've got a verylongwordhere</div>
        </div>
    </body>
</html>

我们找到了this solution。但它在IE11中不起作用。顺便说一句，如果您向我解释它是如何工作的，我将不胜感激。

问题是：＆＃34; 是否有任何跨浏览器（IE11，Chrome，FF，Safari）解决方案可以在没有JS的情况下实现这一点？＆＃34;

编辑：谢谢大家的答案，但我们无法设置固定的宽度有两个原因（对不起，伙计们，我的错，我最初没有把它包含在这个问题中）：

这不够通用（因为项目内容文本可能会更改）
项目大小是响应性的，因此固定项目内容宽度在一个屏幕宽度看起来很好，但在另一个屏幕宽度下看起来很差。

Answer 1

尝试更新HTML和CSS

<div class="list-item">
    <span class="someClass">
      We've got a verylongwordhere
    </span>
 </div>

 .item-contents {
      border: 1px dashed #999;
      text-align: left;
      font-size: 30px;
      padding:10px
    }

 span.someClass {
    border:1px dashed #000;
    padding:5px;
    display:inline-block;
    text-align:left;
    max-width:60%;
}

将具有多行文本的元素与父块的中心对齐，保留左文本对齐

1 个答案: