Auf einer Bootstrap-Responsive-Seite wird zentriert, wie ein Div zentriert wird

132

Positionieren Sie ein Div in der Mitte einer reaktionsfähigen Seite

Ich muss eine reaktionsfähige Seite mit Bootstrap erstellen, indem ich ein Div in der Mitte einer Seite positioniere, wie im unten genannten Layout.

Rama Priya
quelle
Ich muss ein Div mit dem Text zentrieren (Responsive Design mit Bootstrap), das in einem anderen zentrierten Div mit voller Breite col-lg-12 vorhanden sein sollte, wie im Layout. Es wäre hilfreich, wenn ich den Beispielcode in Geige bekommen könnte
Rama Priya

Antworten:

173

UPDATE für Bootstrap 4

Einfachere vertikale Gitterausrichtung mit Flexbox

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}
<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Lösung für Bootstrap 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

Es ist ein einfaches Beispiel für eine horizontale und vertikale Teilung, die in allen Bildschirmgrößen zentriert ist.

ppollono
quelle
41
Vielleicht class="col-xs-4 col-xs-offset-4"sollte es genug sein.
L105
Ich muss die div col-lg-12 in allen Bildschirmgrößen vertikal zentrieren
Rama Priya
1
Ich habe die Lösung für Sie gefunden. Überprüfen Sie diese Geige. Jsfiddle.net/Palapas/52VtD/687 Der Container muss eine Höhe von 100% haben. Andernfalls müssen Sie die absolute Position verwenden
ppollono
45

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

Beispiel Geige

Vokasle
quelle
1
Diese Lösung funktioniert nicht, wenn ich meine Website auf dem Handy öffne.
Codeinprogress
2
Hallo, welchen Browser hast du benutzt? Haben Sie die Stylesheets und Javascript von Bootstrap geladen? Es funktioniert in Firefox und Chrome. Getestet auf allen Bildschirmgrößen.
Vocasle
Ich habe dies getestet, indem ich die Größe meines Browsers geändert und einen reaktionsfähigen Website-Checker verwendet habe. Funktioniert bei mir.
Rocky Kev
1
Dieser Fix bricht Bootstrap Standardstile
ppollono
21

In Bootstrap 4

um den Childs horizontal zentriert , Verwendung Bootstrap-4 - Klasse

justify-content-center

um die Childs vertikal zentriert , Verwendung Bootstrap-4 - Klasse

 align-items-center

Aber denken Sie daran, vergessen Sie nicht, die d-flex-Klasse mit diesen zu verwenden. Es handelt sich um eine Bootstrap-4-Dienstprogrammklasse

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Hinweis: Stellen Sie sicher, dass Sie Bootstrap-4-Dienstprogramme hinzufügen, wenn dieser Code nicht funktioniert


quelle
11

Update für Bootstrap 4

Jetzt, da Bootstrap 4 Flexbox ist, ist die vertikale Ausrichtung einfacher. Bei einem Flexbox-Div in voller Höhe nur wir my-autofür gleichmäßige obere und untere Ränder ...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center


Vertikale Mitte in Bootstrap 4

Zim
quelle
5

Sie müssen nichts in CSS ändern. Sie können dies direkt in der Klasse schreiben und erhalten das Ergebnis.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Geben Sie hier die Bildbeschreibung ein

Jay
quelle
4

Ohne Anzeigetabelle und ohne Bootstrap würde ich das lieber tun

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

Matoeil
quelle
2

Gute Antwort ppollono. Ich habe nur rumgespielt und eine etwas bessere Lösung gefunden. Das CSS würde gleich bleiben, dh:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

Aber für HTML:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

Das wäre genug.

Simranjazz
quelle
2

Nicht der beste Weg, wird aber trotzdem funktionieren

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>
Tarun Rawat
quelle
1

Ich denke, der einfachste Weg, das Layout mit Bootstrap zu erreichen, ist folgender:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

Alles, was ich getan habe, war, Ebenen von Divs hinzuzufügen, mit denen ich das Div zentrieren konnte. Da ich jedoch keine Prozentsätze verwende, müssen Sie die maximale Breite des Div angeben, um zentriert zu werden.

Sie können dieselbe Methode verwenden, um mehr als eine Spalte zu zentrieren. Sie müssen lediglich weitere Div-Ebenen hinzufügen:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Hinweis: Ich habe ein Div mit Spalte 12 für md, sm und xs hinzugefügt. Wenn Sie dies nicht tun, wird das erste Div mit Hintergrundfarbe (in diesem Fall "blueviolet") zusammenbrechen und Sie können die untergeordneten Divs sehen , aber nicht die Hintergrundfarbe.

TheOneAndOnly ME
quelle
1

Für die aktuelle Version von Bootstrap 4.3.1 verwenden

Stil

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Code

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

quelle
1

Versuchen Sie dies. Für das Beispiel habe ich eine feste Höhe verwendet. Ich denke, es hat keinen Einfluss auf das Reaktionsszenario.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Sanka Sanjeeva
quelle
1

Verwenden Sie in Bootstrap 4:

<div class="d-flex justify-content-center">...</div>

Sie können die Position auch ändern, je nachdem, was Sie möchten:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Referenz hier

Wariored
quelle
-1

Die einfachste Lösung besteht darin, auf beiden Seiten eine leere Spalte wie folgt hinzuzufügen:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>
Yuvraj Patil
quelle
-2

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}
rbsthlm
quelle