使標題出現在不同的行

Question

我試圖添加文本'Achievement Unlocked'的文本與網站上出現的2個單詞是分開的行。我嘗試了很多東西，但他們一直在同一行上出現。

我的代碼看起來就像這樣：

var award = document.createElement('div'); // Holds text 
var text = document.createElement('h3'); // contains 'Achievement' 
var text2 = document.createElement('h3'); // contains 'Unlocked' 
$(text).text('Achievement').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(text2).text('Unlocked!').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(award).css({ 
    'height':'200px', 
    'width':'200px', 
    'background-color':'#cce6ff', 
    'position':'fixed', 
    'bottom':'20%', 
    'left':'50%', 
    'transform':'translate(-50%, 0%)', 
    'border':'5px solid #004080', 
    'border-radius':'100%', 
    'display':'table' 
}).fadeIn(500); 
$(award).append(text, text2); 

有沒有人得到了我怎麼可以讓他們在不同的行中一個接一個的div中後的想法？

Answer 1

使用這些樣式，而不是做主題下相互

$(text).text('Achievement').css({ 
     'color': '#660029', 
     'text-align': 'center', 
     'vertical-align': 'bottom', 
     'display': 'table-cell', 
     'font-size': '150%' 
    }); 
    $(text2).text('Unlocked!').css({ 
     'color': '#660029', 
     'text-align': 'center', 
     'vertical-align': 'middle', 
     'display': 'table-row', 
     'font-size': '150%' 
    }); 

JSFiddle

Answer 2

只需添加這行document.body.appendChild(award);

https://jsfiddle.net/ytkkbnp1/2/

var award = document.createElement('div'); // Holds text 
var text = document.createElement('h3'); // contains 'Achievement' 
var text2 = document.createElement('h3'); // contains 'Unlocked' 
$(text).text('Achievement').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'bottom', 
    'display':'table-cell', 
    'font-size':'150%' 
}); 
$(text2).text('Unlocked!').css({ 
    'color':'#660029', 
    'text-align':'center', 
    'vertical-align':'middle', 
    'display':'table-row', 
    'font-size':'150%' 
}); 
$(award).css({ 
    'height':'200px', 
    'width':'200px', 
    'background-color':'#cce6ff', 
    'position':'fixed', 
    'bottom':'20%', 
    'left':'50%', 
    'transform':'translate(-50%, 0%)', 
    'border':'5px solid #004080', 
    'border-radius':'100%', 
    'display':'table' 
}) 
document.body.appendChild(award); 
$(award).append(text, text2);