将多行文本与元素对齐，保留左对齐，并将其居中于父块。

Question

将多行文本与元素对齐，保留左对齐，并将其居中于父块。

htmlcss

5

有一个带有多个选项的菜单。每个选项都有一行内容，居中对齐。但是突然间添加了一个具有两行内容的选项。

根据设计计划，这个具有两行内容的选项仍应该与父选项居中对齐，但是该选项内容元素中的文本应该左对齐：应该是什么样子的

此外，选项是响应式的，选项内容可能会因此和其他选项而改变 - 因此仅使用固定宽度的选项内容是不合适的。

从这段代码开始：

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

我们已经找到了这个解决方案。但它在IE11上不起作用。顺便说一下，如果你能解释一下它是如何工作的，我会很感激的。

问题是：“有没有跨浏览器（IE11、Chrome、FF、Safari）的解决方案可以在不使用JS的情况下实现这个问题？”

编辑：感谢大家的回答，但由于两个原因，我们不能设置固定宽度（对不起，我最初没有在问题中包含这个）：

这不够普遍（因为项目内容文本可能会更改）
项目大小是响应式的，所以固定项目内容宽度在一个屏幕宽度上看起来很好，但在另一个屏幕宽度上看起来很糟糕。

- Boris Sergeev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maheshv13 · 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%;
}