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文字與

回答

相關問題