Na responsywnej stronie bootstrap, jak wyśrodkować div

Question 1

umieść element div na środku responsywnej strony

Muszę utworzyć responsywną stronę za pomocą bootstrap, umieszczając element div na środku strony, jak w poniższym układzie.

Question 2

AKTUALIZACJA dla Bootstrap 4

Prostsze wyrównanie siatki w pionie dzięki modułowi Flex-Box

@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>

Rozwiń fragment

Rozwiązanie dla 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>

Rozwiń fragment

To prosty przykład pionowego i poziomego elementu div wyśrodkowanego na wszystkich rozmiarach ekranu.

Question 3

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Przykładowe skrzypce

Question 4

W bootstrapie 4

aby wyśrodkować dziecko w poziomie , użyj klasy bootstrap-4

justify-content-center

aby wyśrodkować dziecko w pionie , użyj klasy bootstrap-4

 align-items-center

ale pamiętaj, nie zapomnij użyć z nimi klasy d-flex, jest to klasa narzędziowa bootstrap-4, tak jak ta

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

Uwaga: upewnij się, że dodałeś narzędzia bootstrap-4, jeśli ten kod nie działa

Question 5

Aktualizacja dla Bootstrap 4

Teraz, gdy Bootstrap 4 to flexbox, wyrównanie w pionie jest łatwiejsze. Biorąc pod uwagę element div o pełnej wysokości, tylko my my-autodla równych marginesów górnych i dolnych ...

<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

Pionowe centrum w Bootstrap 4

Question 6

Nie musisz niczego zmieniać w CSS, możesz napisać to bezpośrednio w klasie, a otrzymasz wynik.

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

Question 7

bez tabeli wyświetlania i bez bootstrapa, wolałbym to zrobić

<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

Question 8

Dobra odpowiedź ppollono. Po prostu się bawiłem i znalazłem nieco lepsze rozwiązanie. CSS pozostałby taki sam, tj .:

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

Ale dla HTML:

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

To wystarczy.

Question 9

Nie jest to najlepszy sposób, ale nadal będzie działać

<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>

Question 10

Myślę, że najprostszy sposób na wykonanie układu za pomocą bootstrapa jest taki:

<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>

Wszystko, co zrobiłem, to dodanie warstw elementów div, które pozwoliły mi wyśrodkować element div, ale ponieważ nie używam procentów, musisz określić maksymalną szerokość elementu div, który ma być środkowy.

Możesz użyć tej samej metody, aby wyśrodkować więcej niż jedną kolumnę, wystarczy dodać więcej warstw div:

<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>

Uwaga: dodałem element div z kolumną 12 dla md, sm i xs, jeśli tego nie zrobisz, pierwszy element div z kolorem tła (w tym przypadku „blueviolet”) zwinie się, będziesz mógł zobaczyć podrzędne elementy div , ale nie kolor tła.

Question 11

Dla aktualnej wersji Bootstrap 4.3.1 użyj

Styl

<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>

Kod

<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

Question 12

Spróbuj tego, na przykład użyłem stałej wysokości. Myślę, że to nie wpływa na scenariusz responsywny.

<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>

Rozwiń fragment

Question 13

W Bootstrap 4 użyj:

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

Możesz także zmienić pozycję w zależności od tego, co chcesz:

<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>

Odniesienie tutaj

Question 14

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

Rozwiń fragment

możesz to zrobić również w ten sposób.

Question 15

Oto proste reguły CSS, które umieszczają dowolny element div w środku

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Question 16

Najprostszym rozwiązaniem będzie dodanie jednej pustej kolumny po obu stronach, jak poniżej:

  <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>

Question 17

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;
}

Answer 1

139

umieść element div na środku responsywnej strony

Muszę utworzyć responsywną stronę za pomocą bootstrap, umieszczając element div na środku strony, jak w poniższym układzie.

css twitter-bootstrap responsive-design Rama Priya
źródło

stackoverflow.com/questions/9554724/…

Kenny Thompson

Muszę wyśrodkować div z tekstem (Responsive design using bootstrap), który powinien znajdować się w innym środku div o pełnej szerokości col-lg-12, jak w układzie. byłoby pomocne, jeśli mogę uzyskać przykładowy kod w skrzypcach

Rama Priya

Answer 2

stackoverflow.com/questions/9554724/…

Kenny Thompson

Answer 3

Muszę wyśrodkować div z tekstem (Responsive design using bootstrap), który powinien znajdować się w innym środku div o pełnej szerokości col-lg-12, jak w układzie. byłoby pomocne, jeśli mogę uzyskać przykładowy kod w skrzypcach

Rama Priya

Answer 4

AKTUALIZACJA dla Bootstrap 4

Prostsze wyrównanie siatki w pionie dzięki modułowi Flex-Box

@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>

Rozwiń fragment

Rozwiązanie dla 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>

Rozwiń fragment

To prosty przykład pionowego i poziomego elementu div wyśrodkowanego na wszystkich rozmiarach ekranu.

Answer 5

43

Może class="col-xs-4 col-xs-offset-4"wystarczy.

L105

Answer 6

Muszę ustawić div col-lg-12 pionowo na środku na wszystkich rozmiarach ekranu

Rama Priya

Answer 7

1

Znalazłem rozwiązanie dla Ciebie sprawdź to skrzypce jsfiddle.net/Palapas/52VtD/687 pojemnik musi mieć wysokość 100% w przeciwnym razie musisz użyć pozycji bezwzględnej

ppollono

Answer 8

47

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Przykładowe skrzypce

vocasle
źródło

1

to rozwiązanie nie działa, gdy otwieram witrynę w telefonie komórkowym.

codeinprogress

2

Cześć, jakiej przeglądarki używasz? Czy załadowałeś arkusze stylów Bootstrap i javascript? Działa w przeglądarkach Firefox i Chrome. Przetestowano na wszystkich rozmiarach ekranu.

vocasle

Przetestowałem to, zmieniając rozmiar przeglądarki, a także używając responsywnego narzędzia do sprawdzania witryn. Pracuje dla mnie.

Rocky Kev

1

ta poprawka łamie domyślne style bootstrapu

ppollono

Answer 9

1

to rozwiązanie nie działa, gdy otwieram witrynę w telefonie komórkowym.

codeinprogress

Answer 10

2

Cześć, jakiej przeglądarki używasz? Czy załadowałeś arkusze stylów Bootstrap i javascript? Działa w przeglądarkach Firefox i Chrome. Przetestowano na wszystkich rozmiarach ekranu.

vocasle

Answer 11

Przetestowałem to, zmieniając rozmiar przeglądarki, a także używając responsywnego narzędzia do sprawdzania witryn. Pracuje dla mnie.

Rocky Kev

Answer 12

1

ta poprawka łamie domyślne style bootstrapu

ppollono

Answer 13

W bootstrapie 4

aby wyśrodkować dziecko w poziomie , użyj klasy bootstrap-4

justify-content-center

aby wyśrodkować dziecko w pionie , użyj klasy bootstrap-4

 align-items-center

ale pamiętaj, nie zapomnij użyć z nimi klasy d-flex, jest to klasa narzędziowa bootstrap-4, tak jak ta

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

Uwaga: upewnij się, że dodałeś narzędzia bootstrap-4, jeśli ten kod nie działa

Answer 14

Aktualizacja dla Bootstrap 4

Teraz, gdy Bootstrap 4 to flexbox, wyrównanie w pionie jest łatwiejsze. Biorąc pod uwagę element div o pełnej wysokości, tylko my my-autodla równych marginesów górnych i dolnych ...

<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

Pionowe centrum w Bootstrap 4

Answer 15

6

Nie musisz niczego zmieniać w CSS, możesz napisać to bezpośrednio w klasie, a otrzymasz wynik.

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

Sójka
źródło

działa tylko dla poziomego środka, nie wiem dlaczego w górę? Queston zapytał o oba (h i v).

Nuri YILMAZ

Answer 16

działa tylko dla poziomego środka, nie wiem dlaczego w górę? Queston zapytał o oba (h i v).

Nuri YILMAZ

Answer 17

bez tabeli wyświetlania i bez bootstrapa, wolałbym to zrobić

<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

Answer 18

Dobra odpowiedź ppollono. Po prostu się bawiłem i znalazłem nieco lepsze rozwiązanie. CSS pozostałby taki sam, tj .:

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

Ale dla HTML:

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

To wystarczy.

Answer 19

Nie jest to najlepszy sposób, ale nadal będzie działać

<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>

Answer 20

Myślę, że najprostszy sposób na wykonanie układu za pomocą bootstrapa jest taki:

<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>

Wszystko, co zrobiłem, to dodanie warstw elementów div, które pozwoliły mi wyśrodkować element div, ale ponieważ nie używam procentów, musisz określić maksymalną szerokość elementu div, który ma być środkowy.

Możesz użyć tej samej metody, aby wyśrodkować więcej niż jedną kolumnę, wystarczy dodać więcej warstw div:

<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>

Uwaga: dodałem element div z kolumną 12 dla md, sm i xs, jeśli tego nie zrobisz, pierwszy element div z kolorem tła (w tym przypadku „blueviolet”) zwinie się, będziesz mógł zobaczyć podrzędne elementy div , ale nie kolor tła.

Answer 21

Dla aktualnej wersji Bootstrap 4.3.1 użyj

Styl

<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>

Kod

<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

Answer 22

Spróbuj tego, na przykład użyłem stałej wysokości. Myślę, że to nie wpływa na scenariusz responsywny.

<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>

Rozwiń fragment

Answer 23

W Bootstrap 4 użyj:

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

Możesz także zmienić pozycję w zależności od tego, co chcesz:

<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>

Odniesienie tutaj

Answer 24

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

Rozwiń fragment

możesz to zrobić również w ten sposób.

Answer 25

-1

Oto proste reguły CSS, które umieszczają dowolny element div w środku

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Sravan
źródło

Czy mógłbyś rozszerzyć swoją odpowiedź? Linki z czasem stają się nieaktualne.

orique

2

Nie jest to również „metoda bootstrap”, aby to osiągnąć.

FuriousFolder

Answer 26

Czy mógłbyś rozszerzyć swoją odpowiedź? Linki z czasem stają się nieaktualne.

orique

Answer 27

2

Nie jest to również „metoda bootstrap”, aby to osiągnąć.

FuriousFolder

Answer 28

Najprostszym rozwiązaniem będzie dodanie jednej pustej kolumny po obu stronach, jak poniżej:

  <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>

Answer 29

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;
}

Na responsywnej stronie bootstrap, jak wyśrodkować div

Odpowiedzi:

jsFiddle