文章/答案/技术大牛

发布

社区首页 >问答首页 >多行文本对齐元素与保持左文本对齐的父块中心对齐

问多行文本对齐元素与保持左文本对齐的父块中心对齐
EN

Stack Overflow用户

提问于 2016-07-12 12:24:37

回答 1查看 105关注 0票数 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？。”

编辑:谢谢大家的回答，但是我们不能设置固定的宽度，原因有两个(对不起，这是我的错，因为我最初没有把它包括在问题中)：

这还不够普遍(因为项目内容文本可能会更改)
项目大小是响应的，所以固定的项目内容宽度在一个屏幕宽度上看起来很好，而在另一个屏幕宽度上则不太好。

html

css

回答 1

Stack Overflow用户

发布于 2016-07-12 12:49:33

尝试更新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%;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38328834

复制

相似问题

问多行文本对齐元素与保持左文本对齐的父块中心对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多行文本对齐元素与保持左文本对齐的父块中心对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多行文本对齐元素与保持左文本对齐的父块中心对齐
EN