Mache Kopfzeilen in verschiedenen Zeilen

Question

Ich versuche, ein Div mit dem Text "Achievement Unlocked" auf einer Webseite mit den beiden Wörtern in separaten Zeilen erscheinen. Ich habe viele Dinge ausprobiert, aber sie erscheinen immer auf der gleichen Linie.

Mein Code sieht aus, als solche:

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); 

Hat jemand eine Idee, wie ich sie in separaten Zeilen nacheinander in der Mitte des div machen kann?

Answer 1

diese Stile verwenden, anstatt das Thema unter einander

$(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

Fügen Sie einfach diese Zeile 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);