jspsych: поместите div текста над крестиком фиксации вверху в центре, оставив крест фиксации в центре

Question

Больше проблем с центрированием вещей с помощью jspsych. Проверьте этот снимок экрана, он почти показывает то, что я хочу.

Итак, у меня есть <div id='parentdiv'>, который содержит весь текст и образцы над фиксация креста. Прямо сейчас я не изменяю большую часть стиля помимо значений по умолчанию jspsych. Jspsych естественно помещает вещи в центр и укладывает их друг на друга.

Однако я действительно хочу, чтобы оставил крест фиксации в центре страницы и содержимое #parentdiv (то есть образцы + заголовок) ко всем go над крестиком фиксации, предпочтительно около верхнего центра страницы

Так вот код js для снимка экрана, который я ранее разместил .

timeline_arr = [];

var domain_desc = {
    type:"html-keyboard-response",
    choices:13,
    stimulus: function() {
        return "<div id='parentdiv'><div style='font-size:36px; text-align:center;margin-bottom:50px;'><strong>Domain: " + "Attention (Concentration)" + "</strong></div>" +
              //if there's any issue with the code below just put back in 'vertical-align:left;' 
              "<div class='container' style='text-align:left;'>" + 
              "<p><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment makes deficit worse, making person unable to sustain and switch focus as needed.</p>" + 
              "<p><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment has no effect, making person continue to face difficulties in sustaining and switching focus as needed.</p>" + 
              "<p><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment cures deficit, allowing person to sustain and switch focus as needed.</p>" +
              "</div>" + "</div>" +  
              "<div style='font-size:60px;text-align:center;'>+</div>"
    },
};
timeline_arr.push(domain_desc);

Исходя из моего опыта работы с webdev и другими публикациями, для большинства людей go - для размещения чего-либо в верхнем центре веб-страницы используется position:absolute; top:0px;. Поэтому я добавил встроенный стиль к parentdiv, чтобы он имел эти css атрибуты ... Однако, это результат этого.

После выполнения проверки, кажется, что #parentdiv начинается сейчас в верхней центральной части страницы ... Но я просто хочу, чтобы #parentdiv был фактически центрирован в верхней части страницы, а не чтобы origin будет центром страницы.

Я включил полный воспроизводимый код для второго экрана (и вы также можете просто скопировать вызов jsPsych.init() и вставить его в первый фрагмент кода, чтобы воспроизвести его)

timeline_arr = [];

var domain_desc = {
    type:"html-keyboard-response",
    choices:13,
    stimulus: function() {
        return "<div style='position:absolute; top:0px;'><div style='font-size:36px; text-align:center;margin-bottom:50px;'><strong>Domain: " + "Attention (Concentration)" + "</strong></div>" +
              //if there's any issue with the code below just put back in 'vertical-align:left;' 
              "<div class='container' style='text-align:left;'>" + 
              "<p><div style='display:inline-block;background-color:#ed713a;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment makes deficit worse, making person unable to sustain and switch focus as needed.</p>" + 
              "<p><div style='display:inline-block;background-color:#808080;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment has no effect, making person continue to face difficulties in sustaining and switching focus as needed.</p>" + 
              "<p><div style='display:inline-block;background-color:#4169e1;height:27px; width:40px;margin-right: 5px;'></div>Chance treatment cures deficit, allowing person to sustain and switch focus as needed.</p>" +
              "</div>" + 
              "</div>" + 
              "<div style='font-size:60px;text-align:center;'>+</div>"
    },
};
timeline_arr.push(domain_desc);
     jsPsych.init({
        timeline: timeline_arr,
    });

Также имейте в виду, что в настоящее время я использую cdn Bootstrap, а именно класс с именем container назначен div, содержащему 3 образца. Итак, мой html файл выглядит следующим образом.

<!DOCTYPE html>
<html>
    <head>
        <title>Debug JsPsych</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/jspsych.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-html-button-response.js"></script>
        <link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/css/jspsych.css", rel="stylesheet" type="text/css">
        <script src="debugjspsych.js"></script>
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>


    </body>
</html>