Tôi đang cố gắng tập trung vào Container của mình ở giữa trang bằng Bootstrap 4. Cho đến nay tôi đã không thành công. Bất kỳ trợ giúp sẽ được đánh giá cao.
Tôi đã xây dựng nó tại Codepen.io để các bạn có thể chơi với nó và cho tôi biết những gì tôi làm về những ý tưởng ...
Câu trả lời:
Quan trọng! Trung tâm dọc tương đối với chiều cao của cha mẹ
Nếu cha mẹ của phần tử bạn đang cố định tâm không có chiều cao xác định , thì không có giải pháp định tâm dọc nào sẽ hoạt động!
Bây giờ, vào định tâm dọc trong Bootstrap 4 ...
Bạn có thể sử dụng các tiện ích flexbox & size mới để tạo containerchiều cao đầy đủ và display: flex. Các tùy chọn này không yêu cầu thêm CSS (ngoại trừ chiều cao của vùng chứa (ví dụ: html, thân) phải là 100% ).
Tùy chọn 1 align-self-centertrên flexbox con
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
Tùy chọn 2 align-items-centertrên cha mẹ flexbox ( .rowlà display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://www.codeply.com/go/BumdFnmLuk
Tùy chọn 3 justify-content-centertrên cha mẹ flexbox ( .cardlà display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/3gySSEe7nd
Thông tin thêm về Bootstrap 4 Định tâm dọc
Bây giờ Bootstrap 4 cung cấp flexbox và các tiện ích khác , có nhiều cách tiếp cận để căn chỉnh dọc. http://www.codeply.com/go/WG15ZWC4lf
1 - Trung tâm dọc sử dụng lề tự động:
Một cách khác để trung tâm theo chiều dọc là sử dụng my-auto. Điều này sẽ tập trung vào phần tử trong thùng chứa của nó. Ví dụ: h-100làm cho hàng đầy đủ chiều cao và my-autosẽ căn giữa col-sm-12cột.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Sử dụng Auto Margins Demo
my-auto đại diện cho lề trên trục y dọc và tương đương với:
margin-top: auto;
margin-bottom: auto;
2 - Trung tâm dọc với Flexbox:
Vì Bootstrap 4 .rowbây giờ, display:flexbạn chỉ cần sử dụng align-self-centertrên bất kỳ cột nào để căn giữa theo chiều dọc ...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
hoặc, sử dụng align-items-centertrên toàn bộ .rowtrung tâm theo chiều dọc, sắp xếp tất cả col-*trong hàng ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Cột khác nhau Chiều cao Demo
Xem Q / A này ở giữa, nhưng duy trì chiều cao bằng nhau
3 - Trung tâm dọc sử dụng các tiện ích hiển thị:
Bootstrap 4 có utils hiển thị có thể được sử dụng cho display:table, display:table-cell, display:inline, vv .. Đây có thể được sử dụng với các utils kết theo chiều dọc để inline class, inline-block hoặc các yếu tố ô trong bảng.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Trung tâm dọc sử dụng Display Utils Demo
Thêm ví dụ
Hình ảnh trung tâm dọc trong <div>
Trung tâm dọc .row in .container Trung tâm
dọc và dưới cùng trong <div>
Trung tâm con dọc trong cha mẹ
Trung tâm dọc toàn màn hình jumbotron
Quan trọng! Tôi đã đề cập đến chiều cao?
Nhớ định tâm dọc có liên quan đến chiều cao của phần tử cha . Nếu bạn muốn tập trung vào toàn bộ trang, trong hầu hết các trường hợp, đây phải là CSS của bạn ...
body,html {
height: 100%;
}
Hoặc sử dụng min-height: 100vh( min-vh-100trong Bootstrap 4.1+) trên cha / container. Nếu bạn muốn tập trung một yếu tố con bên trong cha mẹ. Cha mẹ phải có chiều cao xác định .
Xem thêm: Căn
dọc trong bootstrap 4
Bootstrap 4 Center Căn dọc và ngang
bạn có thể căn chỉnh theo chiều dọc của thùng chứa của mình bằng cách làm cho thùng chứa cha mẹ uốn cong và thêm align-items:center:
body {
display:flex;
align-items:center;
}html, body {height:100%}... thêm nó làm cho nó hoạt động! Cảm ơn!
Sau 4 lớp bootstrap đã giúp tôi giải quyết điều này
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>Bởi vì không có điều nào ở trên làm việc cho tôi, tôi đang thêm một câu trả lời khác.
Mục tiêu: Để sắp xếp theo chiều dọc và chiều ngang một div trên một trang bằng cách sử dụng các lớp flexbox 4 bootstrap.
Bước 1: Đặt div ngoài cùng của bạn lên chiều cao 100vh. Điều này đặt chiều cao thành 100% chiều cao Veiwport. Nếu bạn không làm điều này, không có gì khác sẽ làm việc. Đặt nó thành một chiều cao 100%chỉ tương đối với cha mẹ, vì vậy nếu cha mẹ không phải là toàn bộ chiều cao của khung nhìn, sẽ không có gì hoạt động. Trong ví dụ dưới đây, tôi đặt Body thành 100vh.
Bước 2: Đặt div container là thùng chứa flexbox với d-flexlớp.
Bước 3: Trung tâm div theo chiều ngang với justify-content-centerlớp.
Bước 4: Trung tâm div theo chiều dọc với align-items-center
Bước 5: Chạy trang, xem div theo chiều dọc và chiều ngang của bạn.
Lưu ý rằng không có lớp đặc biệt nào cần được đặt trên chính div trung tâm (div con)
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>100vhmẹo giúp tôi rất nhiều. Bootstrap cũng cung cấp vh-100lớp cho việc này.
Tôi đã thử tất cả các câu trả lời từ đây, nhưng phát hiện ra đây là sự khác biệt giữa h-100 và vh-100 Đây là giải pháp của tôi:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
Trong Bootstrap 4 (beta), sử dụng align-middle. Tham khảo Tài liệu Bootstrap 4 về căn chỉnh dọc :
Thay đổi căn chỉnh của các yếu tố với các tiện ích căn chỉnh dọc . Hãy lưu ý rằng vertical-align chỉ ảnh hưởng đến nội tuyến , inline-block , inline-bảng , và ô trong bảng yếu tố.
Chọn từ
.align-baseline,.align-top,.align-middle,.align-bottom,.align-text-bottom, và.align-text-topkhi cần thiết.
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="/assets/images/ebook2.png" alt="" class="img-fluid">
</div>
<div class="col-md-6 my-auto">
<h3>Heading</h3>
<p>Some text.</p>
</div>
</div>Dòng này là nơi phép màu xảy ra <div class="col-md-6 my-auto">, my-autosẽ tập trung vào nội dung của cột. Điều này hoạt động rất tốt với các tình huống như mẫu mã ở trên nơi bạn có thể có một hình ảnh có kích thước thay đổi và cần phải có văn bản trong cột ở bên phải với nó.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>flex-grow-1lớp vào thẻ ngăn không cho nó co lại.
Căn dọc Sử dụng bootstrap 4 lớp này:
phụ huynh: bảng d
VÀ
con: d-bảng-cell & align-middle & text-centre
ví dụ:
<div class="tab-icon-holder d-table bg-light">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>và nếu bạn muốn cha mẹ được khoanh tròn:
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>Hai lớp css tùy chỉnh như sau:
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}Sử dụng cuối cùng có thể giống như ví dụ:
<div class="col-md-5 mx-auto text-center">
<div class="d-flex justify-content-around">
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Lg.png" height="30rem">
</div>
</div>
...
</div>
</div>Đặt nội dung của bạn trong một hộp chứa flexbox cao 100% tức là h-100. Sau đó biện minh cho nội dung tập trung bằng cách sử dụng lớp justify-content-centre .
<section class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, Malawi!</h1>
</div>
</section>sử dụng .my-autolớp css (bootsrap4) trên div yor
Trong Bootstrap 4.1.3:
Điều này làm việc cho tôi khi tôi đang cố gắng tập trung một huy hiệu bootstrap bên trong container > row > columnmột h1tiêu đề.
Những gì đã làm việc là một số css đơn giản:
.my-valign-center {
vertical-align: 50%;
}hoặc là
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>