How can I centralize my text in the middle of the screen?

[Larissa_Cury]

Hello, everyone!

I’m wondering how can I center my text in the exact middle of the screen. I’ve tried many CSS margin-left, margin-right, etc configurations from some websites, but they didn’t work for me…I need to put the cross on the exact middle of the screen and the arrows rather below or above, depending on the trial:

                    arrows/clues
                         +
               arrows/clues depending on the trial 

This is currently my configuration:

Template("tabela-target_left.csv" , row => 
    newTrial("p_trial_4_spatial_cue_UP",
    newText("D1", "<br> <b>+</b>")   >>>>>>>>>>>>>>>>>>>>>>>>>>> in the exact middle of the screen
    .cssContainer({
    "font-size":"100px",
    "color":"blue"})
    .center()
    .print()
,
   newTimer("timer-D1",1000)
    .start()
    .wait()
,
   getText("D1")
   .remove()
,
newText("cue", "<b>*</b><br><b>+</b>") >>>>>>>>>>>>>>>>>>>>>>>>>>> in the exact middle of the screen
   .center()
   .cssContainer({
   "font-size":"100px",
   "color":"green"})
   .center()
   .print()
,
    newTimer("timer_cue_D2",100)
    .start()
    .wait()
,
   getText("cue","D2")
   .remove()
,
   newText("D3", "<br> <b>+</b>") >>>>>>>>>>>>>>>>>>>>>>>>>>> in the exact middle of the screen
   .cssContainer({
   "font-size":"100px",
   "color":"pink"})
   .center()
   .print()
,
   newTimer("timer_D3",400)
    .start()
    .wait()
,
   getText("D3")
   .remove()
,
    newImage("imagens", row.imagem)
    .size(500, 200)
,
   newText("cruz_central", "<br> <b>+</b>")   >>>>>>>>>>>>>>>>>>>>>>>>>>> in the exact middle of the screen
   .cssContainer({
   "font-size":"100px",
   "color":"black"})
   .center()
   .print()
,
    //para cima//
    newCanvas("center", 200,200)
    .add( "center at 50%" , "center at 50%" , getImage("imagens"))
    .cssContainer({
    "position": "relative",
    "margin-left": "-40px",
    "margin-right": "-50px",
    "margin-top": "-285px",
    "margin-bottom": "0px",
    "left": "40%",
    "width": "50%"})
    .print()
,
    newKey("keypress1","EI")
    .wait()
,
    getKey("keypress1")
    .test.pressed("E")
    .success( newText("success", "Correct!").print()
    .cssContainer({"font-size":"30px", "margin-top":"150px", "margin-bottom": "150px", "font-family":"Comic Sans MS", "color":"red"})
    .center())
    .failure( newText("failure", "Incorrect!").print() 
    .cssContainer({"font-size":"30px", "margin-top":"150px", "margin-bottom": "150px", "font-family":"Comic Sans MS", "color":"red"})
    .center())
,
     getText("cruz_central")
    .remove()
,
    getCanvas("center")
    .remove()
,
    newTimer("wait-success",400)
    .start()
    .wait()
,
    getText("success")
    .remove()
,
    getText("failure")
    .remove()
,
   newText("separacao", "<br> <b>+</b>")   >>>>>>>>>>>>>>>>>>>>>>>>>>> in the exact middle of the screen
   .cssContainer({
    "font-size":"100px",
    "color":"yellow"})
   .center()
   .print()
,
    newTimer("wait-separacao",2500)
    .start()
    .wait()
));

I guess that’s a matter of arranging pixels, but I’ve tried many many configurations and this is where I’m stucked. This is my demo link: https://farm.pcibex.net/r/tuqgPm/
Ps: I’m willing to do my experiment full screen

Thanks in advance!!

[Jeremy]

Hi Larissa,

You can use .print("center at 50vw", "middle at 50vh") as illustrated in the Masked Priming template to print any element at the exact center of the page

You can use fullscreen to invite the browser to go fullscreen

If you need to print some content slightly above or below the vertical middle of the page, you could do something like this:

newTrial(
    newButton("go fullscreen").print().wait().remove(),fullscreen()
    ,
    newText("above").css("margin-bottom","1em").print("center at 50vw","bottom at 50vh")
    ,
    newText("below").css("margin-top","1em").print("center at 50vw","top at 50vh")
    ,
    newButton("center").print("center at 50vw","middle at 50vh").wait()
)

Jeremy

[Author]

Posts