html - 我的图像没有水平居中，它也溢出了引导容器

Question

据我所知，Bootstrap 类容器将内容的宽度设置为最大 1140 像素。

这是我的页面的外观：

左侧菜单放置正确（在我看来，如果整个网站的宽度为 1140px，则使用 position: absolute 定位它是有意义的）但其他内容不应溢出这个 1140px 容器。

现在我想将该图像放在文本上方，但我无法做到。（尝试使用 margin-left: auto + margin-right: auto + display:block / text-align: center）

这是片段：

var enunt = document.querySelector(".enunt");
var rezolvare = document.querySelector(".rezolvare");
var explicatie = document.querySelector(".explicatie");
var complexitate = document.querySelector(".complexitate");
var executie = document.querySelector(".executie");

var enuntText = document.querySelector(".enunt-BST");
var rezolvareText = document.querySelector(".rezolvare-BST");
var explicatieText = document.querySelector(".explicare-BST");
var complexitateText = document.querySelector(".complexitate-BST");
var executieText = document.querySelector(".executie-BST");

enunt.addEventListener("click", function() {
    enuntText.style.display = "block";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

rezolvare.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "block";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

explicatie.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "block";
    complexitateText.style.display = "none";
    executieText.style.display = "none";
});

complexitate.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "block";
    executieText.style.display = "none";
});

executie.addEventListener("click", function() {
    enuntText.style.display = "none";
    rezolvareText.style.display = "none";
    explicatieText.style.display = "none";
    complexitateText.style.display = "none";
    executieText.style.display = "block";
});

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
    background-color: #00000f;
}

body {
    width: 100%;
    color: #fff;
    text-rendering: optimizeLegibility;
    font-family: "Proxima Nova" !important;
    font-size: 10px;
    overflow-x: hidden;
    background-color: #00000f !important;
}

.navbar-custom {
    position: relative;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bg-transparent {
    background-color: transparent !important;
}

.nav-color {
    color :#fff !important;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

.nav-color:hover {
    color: #77dff1 !important;
}

.nav-active {
    color: #77dff1 !important;
}

.display-custom {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 17.5rem !important;
    text-align: center;
}

.lead-custom {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

/*Continut centru*/

#central {
    font-family: 'Proxima Nova', sans-serif;
    display: table;
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1 !important;
    font-size: 17.5rem;
    text-align: center;
}

.intro {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

#hr {
    position: absolute;
    top: 90%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1 !important;
    max-width: 90%;
}


.button-wrap {
    postion: absolute;
    text-align: center;
    margin-top: 2.5rem;
}

.button-custom {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

.button-custom:hover {
    font-weight: 100;
    color: #00000f;
    background: #77dff1;
}

/* probleme DEI */

.list-item-custom {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    margin-bottom: 0.7rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.list-item-custom:hover {
    background-color: #77dff1;
    color: #fff;
}

.col-sm-6 {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.col-hover:hover {
    font-weight: 100;
    color: #fff;
    background: #77dff1;
}

.col-custom {
    color: #fff;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
}

.pre-scrollable {
    max-height: 700px !important;
    border: 1px solid #77dff1;
}

.lista-pasi-executie {
    list-style: decimal;
}

.fontawesome-custom {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #77dff1;
    font-size: 20rem;
}

.autor-color {
    color: #77dff1;
    font-weight: bold;
}

.explicatie-rezolvare {
    color: #77dff1;
    font-weight: bold;
}

.lista-observatii {
    list-style: disc;
}

.lista-pasi-executie > li {
    margin-left: 2rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divide et Impera</title>
    <link href="../css/normalize.css" rel="stylesheet" />
    <link href="../css/fonts.min.css" rel="stylesheet" />
    <link href="../css/main.css" rel="stylesheet" />
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6612084f00.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: #fff !important"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link nav-color" href="#">Home</a>
                <a class="nav-link nav-color" href="#">Introducere DEI</a>
                <a class="nav-link nav-color" href="#">DEI Iterativ</a>
                <a class="nav-link nav-color nav-active" href="#">Probleme DEI</a>
              </div>
            </div>
          </nav>
          <div style="position: absolute; top: 50%; left: 1%; transform:translateY(-50%);">
                <ul class="list-group">
                    <li class="list-group-flush list-item-custom enunt">Enunt</li>
                    <li class="list-group-flush list-item-custom rezolvare">Rezolvare + cod</li>
                    <li class="list-group-flush list-item-custom explicatie">Explicatie rezolvare</li>
                    <li class="list-group-flush list-item-custom complexitate">Complexitate</li>
                    <li class="list-group-flush list-item-custom executie">Executie</li>
                  </ul>
          </div>
              <div class="enunt-BST">
                <div class="row">
                  <div class="col-xs-12 col-custom">
                    <i class="fas fa-clipboard fontawesome-custom"></i>
                  </div>
                </div>
                <div id="central">
                  <div class="col-custom">
                    <h1 class="display-3">Autor: <span class="autor-color">Mihai Vasile</span></h1>
                  </div>
                      <div class="col-custom">
                            Sa se demonstreze daca un arbore binar este de tipul BST (binary search tree)
                            <div class="observatie-BST">
                              <span style="font-weight: bold; color: #77dff1;">Observatie </span>- un BST are urmatoarele proprietati:
                            </div>
                            <ul class="lista-observatii">
                              <li>Orice subarbore din partea stanga al unui nod contine valori mai mici decat nodul “tata”&lt;/li>
                              <li>Orice subarbore din partea dreapta al unui nod contine valori mai mari decat nodul “tata”&lt;/li>
                              <li>Atat subarborele drept, cat si cel stang trebuie sa fie la randul lor BST</li>
                            </ul>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="rezolvare-BST" style="display: none; color: #fff;">
                <div id="central">
                    <div class="col-custom">
                          <pre class="pre-scrollable" style="color: #fff; text-align: justify;">
                        #include "iostream"

                        using namespace std;
                        
                        //Un nod al unui arbore binar are drept componente id-ul sau,
                        //cat si pointeri catre "copilul" drept si cel stang.
                        
                        class node
                        {
                        public:
                            int data;
                            node* left;
                            node* right;
                        
                            // Allocam noului nod id-ul sau 
                            //si initializam pointeri catre stanga si dreapta cu NULL
                            node(int data)
                            {
                                this->data = data;
                                this->left = NULL;
                                this->right = NULL;
                            }
                        };
                        
                        int isBSTUtil(node* node, int min, int max);
                        
                        /* Functia principala ce verifica daca arborele binar
                        este de tip BST sau nu, utilizand o functie secundara numita
                        isBSTUtil */
                        int isBST(node* node)
                        {
                            return(isBSTUtil(node, INT_MIN, INT_MAX));
                        }
                        /* Intoarce adevarat daca arborele dat este de tip BST si
                        se respecta conditiile impuse in cerinta: 
                        id-ul sa fie >=min si <=max 
                        */
                        int isBSTUtil(node* node, int min, int max)
                        {
                            /* un nod NULL este de tip BST */
                            if (node == NULL)
                                return 1;
                        
                            /* fals daca id-ul nodului nu este cuprins intre min si max */
                            if (node->data < min || node->data > max)
                                return 0;
                        
                            /* Daca nodul curent respecta conditia BST, se verifica recursiv subarbori acestuia,
                            modificand corespunzator min si max */
                            return
                                isBSTUtil(node->left, min, node->data - 1) && // Id-urile nu trebuie sa se repete  
                                isBSTUtil(node->right, node->data + 1, max); // Id-urile nu trebuie sa se repete
                        }
                        
                        
                        int main()
                        {
                            node* root = new node(4);
                            root->left = new node(2);
                            root->right = new node(5);
                            root->left->left = new node(1);
                            root->left->right = new node(3);
                        
                            if (isBST(root))
                                cout << "Este BST";
                            else
                                cout << "Nu este BST";
                        
                            return 0;
                        }
                          </pre>
                    </div>
                </div>
            </div>
            <div class="explicare-BST" style="display: none; color: #fff;">
              <div class="row">
                <div class="col-xs-12 col-custom">
                  <i class="far fa-lightbulb fontawesome-custom"></i>
                </div>
              </div>
              <div id="central">
                <div class="row">
                  <div class="col-custom" style="text-align: left;">
                    <span class="explicatie-rezolvare">Explicatie rezolvare:</span>  
    Problema are la baza verificarea daca id-urile unice ale unor noduri dintr-un arbore respecta conditiile specifice unui arbore BST.
    Incepem prin a ne declara arborele, acesta fiind o clasa ce contine: id-ul, cat si pointeri catre „fii” (subarborii) sai: stang si drept.
    Se apeleaza functia ce verifica daca arborele este BST sau nu, aceasta efectuand urmatoarele operatii:
    <ol class="lista-pasi-executie">
      <li>Se seteaza initial limitele intre care trebuie sa se situeze nodurile min si max drept limitele tipului de data INT</li>
      <li>Verifica daca nodul dat este NULL, caz in care returnaza adevarat (un nod gol este de tip BST deoarece nu influenteaza min si max si nu are un id asociat)</li>
      <li>Se verifica daca id-ul nodului este cuprins in intervalul [min,max].</li>
      <li>In caz negativ, functia returneaza 0;</li>
      <li>In caz afirmativ, se apeleaza recursiv functia mai intai pe partea stanga a arborelui, dupa care pe partea dreapta, modificand min si max corespunzator directiei in care o luam</li>
    </ol>  
                    </div>
                </div>   
            </div>
            </div>
            <div class="complexitate-BST" style="display: none; color: #fff;">
              <div class="row">
                <div class="col-xs-4 col-custom">
                  <img src="https://imgur.com/a/6lS74SW" style="text-align: center;"><br>
                </div>
              </div>
              <div id="central">              
                <div class="col-custom">
                        Complexitate: O(n) <br>
                        Demonstratie complexitate: <br>
                        Algoritmul prezentat mai sus verifica daca id-ul nodului curent se afla in intervalul [min,max]. In caz afirmativ, acesta se autoapeleaza si continua aceasta verificare a id-ului mai intai in subarborii stangi, dupa care cei drepti.
                        Astfel, pentru un arbore de marime n, sunt parcurse in mod recursiv toate cele n noduri, ceea ce da programului o complexitate medie de O(n).
                </div>
                </div>
            </div>
            <div class="executie-BST" style="display: none;">
              
          </div>
          </div>
      </div>
    </div>
</body>
<script src="../js/main.js"></script>
</html>

如何将该图像放在文本上方？（点击菜单中的“Complexitate”查看文字和图片）

标签： htmlcsstwitter-bootstrap