H2文字宽度比H1文字与

所以我有这样的HTML代码下：H2文字宽度比H1文字与

<div> 
    <h1>My h1 title</h1> 
    <h2>This is my h2 text which needs to be center aligned and in the same time not to pass the h1 title width</h2> 
</div>

我想这个块只使用CSS看起来像这样的：

h2 width should not pass h1 width

说明：我的h1会有更大的字体大小，我的h2会有更小的字体大小。我希望我的h2将在div中对齐，div应该具有我的h1文本的宽度。（h1应该停留在一条线上不是很多）

我该如何做到这一点？谢谢

来源

2015-06-02 paulalexandru

用CSS。你能告诉我们你已经试过的东西吗 – George

我已经在问题中粘贴了我的代码。除此之外，我为它们添加了一些字体大小，颜色和中心与h2对齐，但我不知道如何将div宽度设置为h1宽度。 – paulalexandru

不确定需求。创建了一个小提琴。这是你想要的吗？ - http://jsfiddle.net/8L9j347r/ –

-1

你可以试试一个名为FitText.js的jQuery插件。就像名字所暗示的那样，它适合填充容器的文本，正如演示here。把你的头文件放在同一个div里，并且运行$("h1,h2").fitText();应该给它们相同的宽度。查看他们的Github page以获取更多示例。

来源

2015-06-02 10:48:48

-1

这里有一个巨大的周围只用CSS实现这一目标（哈克）的方式：

http://codepen.io/anon/pen/waJKGw

div { 
    margin:0 auto; 
    width:300px; 
    text-align:center 
} 
h1 { 
    text-align:justify; 
    text-align-last: justify; 
    display:block; 
    margin-bottom:0; 
} 
h1:after { 
    content: ""; 
    display: inline-block; 
    width: 100%; 
    height:0; 
}

的H1是有道理的填写您的div容器的整个宽度..这意味着如果你的div很宽，你的h1文本很短，你会得到一些非常难看的东西 - 但这是你要弄清楚你的内容。

然后H2只是居中对齐。

来源

2015-06-02 11:22:55 Giuseppe

如果你打算投票支持你要求的东西 - 至少解释你投票的原因。 – Giuseppe

H2文字宽度比H1文字与

回答

相关问题