MarksCode MarksCode - 6 months ago 8
jQuery Question

Make headers appear on different lines

I'm trying to add a div with the text 'Achievement Unlocked' appear on a webpage with the 2 words being on separate lines. I've tried numerous things but they keep appearing on the same line.

My code looks as such:

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


Has anyone got an idea of how I can make them on separate lines one after the other in the middle of the div?

hsh hsh
Answer

use these styles instead to make theme under each other

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

Comments