it-swarm.com.de

CSS: Responsive Methode zum Zentrieren eines Fluid-Div (ohne px-Breite) bei gleichzeitiger Begrenzung der maximalen Breite?

Ich habe Millionen von Fragen darüber gesehen, wie man ein Blockelement zentriert, und es scheint ein paar populäre Wege zu geben, aber sie alle hängen von festen Pixelbreiten ab. Dann entweder margin:0 auto oder mit absoluter/relativer Positionierung und left:50%; margin-left:[-1/2 width]; usw. Wir alle wissen, dass dies nicht funktioniert, wenn das Element eine in% eingestellte Breite hat.

Gibt es wirklich keine Möglichkeit, dies auf wirklich flüssige Weise zu tun? Ich spreche von der Verwendung von % für die Breite (nicht, die ein Dutzend Medienabfragen mit zunehmend kleinen festen Breiten setzt). 

Achtung: Es gibt unzählige Lösungen, die das Buzz-Word "responsive" verwenden, aber nicht meine Frage beantworten (weil sie sowieso feste Breiten verwenden). Hier ist ein Beispiel .

Update: Ich hätte fast vergessen: Wie gehen Sie mit der Begrenzung der maximalen Breite des zentrierten Elements um und behalten es trotzdem in der Mitte? Siehe meinen Kommentar unter @ smdragers Antwort. Praxisbeispiel. Ich möchte, dass eine Popup-Nachricht oder ein Light-Box-Effekt, der einen Textabsatz enthält, zentriert im Fenster angezeigt wird und der Text je nach Breite fließend umbrochen wird. Ich möchte jedoch nicht, dass sich das Textfeld zu weit ausdehnt, wenn der Text schwer lesbar wird (stellen Sie sich einen 4-Fuß-Bildschirm mit drei Absätzen vor, die auf eine einzelne Textzeile gestreckt sind). Wenn Sie den meisten Ansätzen eine maximale Breite hinzufügen, stoppt das zentrierte Kästchen, wenn die maximale Breite erreicht ist.

24
emersonthis

Horizontal und vertikal zentrieren

Die Höhe und Breite in Prozent macht das Zentrieren sogar noch einfacher. Sie versetzen die linke und obere Hälfte nur um die Hälfte der Fläche, die nicht vom Div besetzt ist.

Wenn Sie also eine Höhe von 40% haben, sind 100% - 40% = 60%. Sie wollen also 30% über und unter. Dann oben: 30% machen den Trick.

Siehe das Beispiel hier: http://dabblet.com/Gist/5957545

Nur horizontal zentrieren

Inline-Block verwenden. Die andere Antwort hier funktioniert jedoch nicht für IE 8 und darunter. Sie müssen dafür einen CSS-Hack oder bedingte Stile verwenden. Hier ist die Hack-Version:

Siehe das Beispiel hier: http://dabblet.com/Gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

BEARBEITEN

Durch die Verwendung von Medienabfragen können Sie zwei Techniken kombinieren, um den gewünschten Effekt zu erzielen. Die einzige Schwierigkeit ist die Höhe. Sie verwenden ein verschachteltes div, um zwischen% width und 

http://dabblet.com/Gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
39
smdrager

Aus Chris Coyiers Artikel über prozentuale Breite zentrieren Elemente:

Anstatt negative Ränder zu verwenden, verwenden Sie negative translate() verwandelt sich.

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

16
Brian Phillips

Ich denke, Sie können display: inline-block für das zu zentrierende Element verwenden und text-align: center; für das übergeordnete Element festlegen. Dies zentriert das div definitiv auf allen Bildschirmgrößen.

Hier können Sie eine Geige sehen: http://jsfiddle.net/PwC4T/2/ Ich füge den Code hier der Vollständigkeit halber hinzu.

HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

Bei der vertikalen Zentrierung habe ich die Unterstützung einiger älterer Browser zugunsten von display: table;, die den Code unbedingt reduzieren, "fallengelassen". Siehe folgende Geige: http://jsfiddle.net/jFAjY/1/

Hier ist der Code (noch einmal) zur Vollständigkeit:

HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

Der Vorteil dieses Ansatzes? Sie müssen sich nicht mit irgendeinem Percantage auseinandersetzen, sondern auch mit dem <video>-Tag (html5), das zwei verschiedene Größen hat (eine während des Ladens, eine nach dem Laden), können Sie die Tag-Größe nicht abrufen Video wird geladen).

Der Nachteil ist, dass die Unterstützung für einige ältere Browser eingestellt wird (ich denke, dass IE8 dies nicht richtig handhaben kann).

12
Fire-Dragon-DoL

EDIT:
http://codepen.io/gcyrillus/pen/daCyu Für ein Popup müssen Sie position: fixed, display: tabelleigenschaft und max-width mit em oder rem-Werten verwenden: )
mit dieser CSS-Basis:

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
1
G-Cyr

Das hört sich vielleicht sehr simpel an ...

Dadurch wird das div innerhalb des div zentriert, genau in der Mitte in Bezug auf den linken und rechten Rand oder den übergeordneten Container. Sie können jedoch den Prozentsatz links und rechts symmetrisch anpassen.

margin-right: 10%;
margin-left: 10%;

Dann können Sie% anpassen, um es so breit zu machen, wie Sie es möchten.

0
Bruno Vincent

So etwas könnte es sein?

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

DEMO: http://jsfiddle.net/t5Pp2/2/

Edit: Das Hinzufügen von display:block ruiniert die Sache nicht, also ...

Sie können auch den Rand auf: margin: 0 auto 0 auto; setzen, nur um sicherzustellen, dass er nur auf diese Weise zentriert wird, nicht auch von oben.

0
Ms. Nobody