文章/答案/技术大牛

发布

社区首页 >问答首页 >如果是单行，则居中；如果是多行，则不居中

问如果是单行，则居中；如果是多行，则不居中
EN

Stack Overflow用户

提问于 2012-03-18 09:03:56

回答 2查看 533关注 0票数 5

如果文本适合一行，是否可以水平居中对齐；如果文本占多行，是否可以水平居中对齐；如果文本占多行，是否可以水平居中对齐(最好是，但不是必须的，不要使用white-space: normal )？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-03-18 12:03:38

这是一个HTML+CSS解决方案。

诀窍是：

<span> inside <p>具有display: inline-box;属性，因此它将缩小到其内容的大小。
<p>具有text-align: center，因此如果<代码>D12的大小小于<代码>D17的宽度，则display: inline-box;将居中。因此，文本E219实际上将是left-aligned.

<!DOCTYPE html> <html>
    <head>
        <title>Center</title>
        <style type="text/css">
            .big-box {
                text-align: center;
                width: 40em;
                border: 1px solid red;
            }
            .center-if-single-line {
                text-align: left;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Small</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                </span>
            </p>
            <h1>Big</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                </span>
            </p>
        </div>
    </body>
</html>

票数 4

Stack Overflow用户

发布于 2012-03-18 09:46:23

Javascript的解决方案--不一定是最好的--是询问div/p的高度，并从那里做出决定。如果只有一行，则需要知道DOM元素的高度。如果高度超过该值，则执行一项操作；如果未超过，则执行另一项操作。您可以将CSS设置为缺省为更常见的情况，并且只在少数情况下更改它。

例如：

var tag = document.getElementById("id_here");

if(tag.offsetHeight > 18){
   tag.style.textAlign = "left";
   tag.style.whiteSpace = "normal";}

您也可以使用jQuery。请注意，offsetHeight包含填充。

但您并不是真的想要Javascript解决方案。请注意，我无法想象如何在CSS中做到这一点，因为它涉及到动态样式。我认为这是不可能的。

票数 1

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

原文链接：

https://stackoverflow.com/questions/9755180

复制

相似问题

问如果是单行，则居中；如果是多行，则不居中
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果是单行，则居中；如果是多行，则不居中EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果是单行，则居中；如果是多行，则不居中
EN