zentrieren Sie ein div auf die Seite unabhängig von dem Element, das darin enthalten ist

Question

Ich mache eine Datenvisualisierung (vis) und ich möchte das vis einen Schlüssel (wie eine Seitenleiste) für die verschiedenen Farben haben. Ich habe dies getan, indem ein div machen und schwimmend es links und die vis schwebte nach rechts:

HTML

<div id="Container"> 
    <div id="key"></div> 
    <div id="visContainer"> 
     <div id="vis"></div> 
    </div> 
</div> 

CSS

#key{ 
    float:left; 
    width:5%; 
} 
#visContainer{ 
    float: right; 
    width: 95%; 
} 
#vis{ 
    outline: solid; 
    outline-color: black; 
} 

Aber offensichtlich die vis div wird nicht immer auf dem Bildschirm zentriert sein. Gibt es eine Möglichkeit, dies zu ermöglichen (d. H. Ein zentriertes vis, das ein sideviv hat, das die Zentralität des vis div nicht behindert)?

p.s. Wenn möglich, möchte ich vermeiden, absolute Positionen als ID zu verwenden, um mit der Seitengröße zu skalieren.

Answer 1

können Sie Prozentsätze verwenden, um die in der Mitte des Bildschirms in dem über Containerelement zu berechnen:

50% * 95% = 47.5% 

Das ist, wo das Zentrum Ihres vis Element sein sollte. Jetzt nur noch die Hälfte seiner Breite subtrahieren und Sie sind gut zu gehen:

47.5% - (10%/2) = 42.5% 

Siehe hier:

#key{ 
 
    float:left; 
 
    width:5%; 
 
    height: 30px; 
 
    background: yellow; 
 
} 
 
#visContainer{ 
 
    float: right; 
 
    width: 95%; 
 
    height: 30px; 
 
    background: cyan; 
 
    position: relative; 
 
} 
 
#vis{ 
 
    outline: solid; 
 
    outline-color: black; 
 
    width: 10%; 
 
    margin-left: 42.5%; 
 
}

<div id="Container"> 
 
    <div id="key"></div> 
 
    <div id="visContainer"> 
 
     <div id="vis"></div> 
 
    </div> 
 
</div>

Natürlich können Sie das ganze Mathematik vermeiden, indem Sie absolute Position auf der Seitenleiste (wird immer noch skalieren). Beachten Sie, dass nun die 10% Breite des über Elements 10% des vollen Körperbreite, da der Behälter 100% breit (gehen „unter“ die #key Sidebar ") ist

es Siehe hier:.

#key{ 
 
    position:absolute; 
 
    z-index: 1; 
 
    width:5%; 
 
    height: 30px; 
 
    background: yellow; 
 
} 
 
#visContainer{ 
 
    height: 30px; 
 
    background: cyan; 
 
    position: relative; 
 
} 
 
#vis{ 
 
    outline: solid; 
 
    outline-color: black; 
 
    width: 10%; 
 
    margin: auto; 
 
}

<div id="Container"> 
 
    <div id="key"></div> 
 
    <div id="visContainer"> 
 
     <div id="vis"></div> 
 
    </div> 
 
</div>

Answer 2

HTML

<div class="main-block"> 
<div id="Container"> 
    <div id="key">ddd</div> 
    <div id="visContainer"> 
     <div id="vis">sss</div> 
    </div> 
    </div> 
</div> 

CSS

.main-block{ 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
} 

#container{ 
width: 50%; 
display: inline-block; 
}