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

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>

Run Code Online (Sandbox Code Playgroud)

我们找到了这个解决方案.但它在IE11中不起作用.顺便说一句,如果你能向我解释它是如何运作的,我将不胜感激.

问题是:" 在没有JS的情况下,是否有任何跨浏览器(IE11,Chrome,FF,Safari)解决方案实现这一点？ "

编辑:谢谢大家的答案,但我们无法设置固定的宽度有两个原因(对不起,伙计们,这是我的错,我最初没有把它包括在这个问题中):

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

Answer 1

mah*_*v13 0

尝试更新 HTML 和 CSS

   .list-item {
          border: 1px solid #999;
          padding: 10px;
          text-align: center;
          width: 350px;
        }


.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%;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	97 次
最近记录：	9 年，3 月前