<div class="container-fluid col-xl-8">
            {% if( aSurveyInfo.options.brandlogo == "on") %}
                <div class="navbar-brand logo-container d-none d-md-block">
                    {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-fluid"}) }}
                </div>
            {% endif %}
            <div id="survey-title" class="surveytitle">{{oSurvey.localizedTitle}} </div>
            <div id="navbar-menu" class="dropdown ms-auto ls-no-js-hidden">
                {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                    aSurveyInfo.aNavigator.save.show == "Y" or
                    ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                    aSurveyInfo.options.showclearall == 'on') or
                    aSurveyInfo.aQuestionIndex.bShow == true or
                    aSurveyInfo.alanguageChanger.show == true) %}
                    <div id="navbar-toggler" class="navbar-toggler" data-bs-toggle="dropdown"
                        data-bs-auto-close="outside" aria-expanded="false">
                        <span class="ri-more-fill"></span>
                    </div>
                    <ul id="main-dropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-toggler">
                        {{ include('./subviews/navigation/language_changer_top_menu.twig') }}
                        {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                            aSurveyInfo.aNavigator.save.show == "Y" or
                            ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                            aSurveyInfo.options.showclearall == 'on') or
                            aSurveyInfo.aQuestionIndex.bShow == true) %}
                            <li class="dropdown-header text-uppercase">{{ gT("Survey options") }}</li>
                        {% endif %}
                        {{ include('./subviews/navigation/save_links.twig') }}
                        {{ include('./subviews/navigation/question_index_menu.twig') }}
                        {{ include('./subviews/navigation/clearall_links.twig') }}
                    </ul>
                {% endif %}
            </div>
            <ul id="back-content" class="d-none"></ul>
        </div>

.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Change font /
        font-family: Arial, sans-serif; /* Change to desired font family */
        /* Other styling /
        font-size: 24px; /* Adjust font size as needed /
        font-weight: bold; /* Adjust font weight as needed /
    }

<div class="d-none d-md-block survey-name large-heading surveytitle">
       {{oSurvey.localizedTitle}}
</div>

.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }