จัดศูนย์แนวตั้งใน Bootstrap 4

322

ฉันพยายามจัดกึ่งกลางคอนเทนเนอร์ของฉันที่กึ่งกลางหน้าโดยใช้ Bootstrap 4 ฉันยังไม่ประสบความสำเร็จ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม

ฉันได้สร้างมันขึ้นที่Codepen.ioเพื่อให้พวกคุณสามารถเล่นกับมันและแจ้งให้เราทราบว่าอะไรที่ทำงานได้ดีในขณะที่ฉันกำลังออกความคิด ...

แสดงตัวอย่างโค้ด

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

ขยายตัวอย่างข้อมูล

— คาแนนซีตัน
แหล่งที่มา

675

สิ่งสำคัญ! แนวตั้งศูนย์กลางสัมพันธ์กับความสูงของผู้ปกครอง

ถ้าแม่ขององค์ประกอบที่คุณกำลังพยายามที่จะได้กำหนดศูนย์ไม่มี ความสูง , ไม่มีของการแก้ปัญหาแนวตั้งตรงกลางจะทำงาน!

ตอนนี้เข้าสู่ศูนย์กลางแนวตั้งใน Bootstrap 4 ...

คุณสามารถใช้ใหม่flexbox และขนาดสาธารณูปโภคที่จะทำให้เต็มความสูงและcontainer display: flexตัวเลือกเหล่านี้ไม่ต้องการ CSS เพิ่มเติม (ยกเว้นความสูงของคอนเทนเนอร์ (เช่น: html, body) ต้องเป็น 100% )

ตัวเลือก 1 align-self-centerบนเฟล็กบ็อกซ์ลูก

<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

ตัวเลือก 2 align-items-centerบนพาเรนต์ flexbox ( .rowคือ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

ตัวเลือก 3 justify-content-centerบนพาเรนต์ flexbox ( .cardคือ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

ข้อมูลเพิ่มเติมเกี่ยวกับ Bootstrap 4 แนวตั้งตรงกลาง

ตอนนี้ Bootstrap 4 เสนอ flexbox และยูทิลิตี้อื่น ๆมีหลายวิธีในการจัดแนวตั้ง http://www.codeply.com/go/WG15ZWC4lf

1 - ศูนย์แนวตั้งโดยใช้ระยะขอบอัตโนมัติ:

my-autoวิธีการศูนย์แนวตั้งก็คือการใช้ สิ่งนี้จะทำให้องค์ประกอบอยู่ตรงกลางภายในคอนเทนเนอร์ ตัวอย่างเช่นh-100ทำให้แถวมีความสูงเต็มและmy-autoจะจัดแนวcol-sm-12คอลัมน์เป็นแนวตั้ง

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

ศูนย์แนวตั้งโดยใช้การสาธิตระยะขอบอัตโนมัติ

my-auto แสดงระยะขอบบนแกน y ในแนวตั้งและเทียบเท่ากับ:

margin-top: auto;
margin-bottom: auto;

2 - ศูนย์แนวตั้งพร้อม Flexbox:

เนื่องจาก Bootstrap 4 .rowเป็นตอนนี้display:flexคุณสามารถใช้align-self-centerในคอลัมน์ใดก็ได้เพื่อจัดกึ่งกลางแนวตั้ง ...

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

หรือใช้align-items-centerทั้งหมด.rowเพื่อจัดกึ่งกลางแนวตั้งทั้งหมดcol-*ในแถว ...

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

การสาธิตคอลัมน์แนวตั้งศูนย์ความสูงต่าง ๆ

ดู Q / A นี้เพื่อศูนย์ แต่รักษาความสูงเท่ากัน

3 - ศูนย์กลางแนวตั้งโดยใช้ประโยชน์จากการแสดงผล:

Bootstrap 4 มีutils จอแสดงผลที่สามารถนำมาใช้สำหรับdisplay:table, display:table-cell, display:inlineฯลฯ .. เหล่านี้สามารถใช้กับutils แนวตั้งที่จะจัดแบบอินไลน์, อินไลน์บล็อกหรือตารางองค์ประกอบของเซลล์

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

ศูนย์แนวตั้งโดยใช้การสาธิตการใช้ประโยชน์ดิสเพลย์

ตัวอย่างเพิ่มเติม
ภาพกึ่งกลางแนวตั้งใน<div>
แนวตั้งกึ่งกลาง .row ใน. ตัว
ตั้งกึ่งกลางแนวตั้งและด้านล่างใน<div>
แนวตั้งกึ่งกลางลูกในแม่
แนวตั้งกึ่งกลางแนวตั้งแบบเต็มหน้าจอ jumbotron

สิ่งสำคัญ! ฉันพูดถึงส่วนสูงหรือไม่

จำไว้ว่าการตั้งกึ่งกลางแนวตั้งนั้นสัมพันธ์กับความสูงขององค์ประกอบหลัก หากคุณต้องการให้อยู่กึ่งกลางหน้าทั้งหมดโดยส่วนใหญ่ควรเป็น CSS ของคุณ ...

body,html {
  height: 100%;
}

หรือใช้min-height: 100vh( min-vh-100ใน Bootstrap 4.1+) บนพาเรนต์ / คอนเทนเนอร์ หากคุณต้องการจัดองค์ประกอบของลูกให้อยู่กึ่งกลางภายในพาเรนต์ ผู้ปกครองจะต้องมีการกำหนดความสูง

ดูเพิ่มเติมได้ที่:
การจัดแนวดิ่งใน bootstrap 4
Bootstrap 4 ศูนย์การจัดแนวตั้งและแนวนอน

— ซิม
แหล่งที่มา

1

เมื่อใช้ด้านบนของเพจที่มีแถบนำทางฉันจะได้รับแถบเลื่อน ฉันคิดว่ามันเพิ่มความสูง 100% ด้านล่างแถบนำทางและอยู่ตรงกลาง ฉันจะแก้ไขได้อย่างไร

— ขอบเขตใหม่

ฉันพยายามจัดเรียงแถวหลายแถวให้อยู่ตรงกลางด้วยเฟล็กบ็อกซ์ ฉันต้องการจัดตำแหน่งปุ่มทั้งหมดให้อยู่กึ่งกลาง codeply.com/go/5abdqC33cU

— Coder

ฉันเตรียม codepen ในปัจจุบันซึ่งแสดงวิธีการจัดกึ่งกลาง 3 วิธีตามวิธีที่แสดงที่นี่: codepen.io/yigith/pen/oNjmGEL

— KodFun

23

คุณสามารถจัดแนวคอนเทนเนอร์ของคุณในแนวตั้งได้โดยการทำให้คอนเทนเนอร์หลักนั้นยืดหยุ่นและเพิ่มalign-items:center:

body {
  display:flex;
  align-items:center;
}

ปากกาที่อัพเดต

— พีท
แหล่งที่มา

1

ohhh lol ฉันพลาดลิงค์ในคำอธิบาย ... คุณยังเพิ่มhtml, body {height:100%}... การเพิ่มที่ทำให้มันใช้งานได้! ขอบคุณ!

— canaan seaton

1

คำตอบของคุณไม่สามารถแก้ปัญหาได้ในวิธีที่ถาม (โดยใช้ bootstrap)

— AlexNikonov

1

ฉันทั้งหมดไม่เห็นด้วยกับคุณคุณเสนอให้แก้ปัญหาแม้จะมีคำถามเกี่ยวกับวิธีการทำกับคลาส Bootstrap

— AlexNikonov

@AlexNikonov ไม่มีคำถามใน OP ที่บอกว่าพวกเขาถูก จำกัด ให้ใช้ bootstrap เท่านั้น - นี่เป็นทางเลือกสำหรับคนอื่น ๆ ที่อาจลงจอดบนหน้านี้เพื่อมองหาสิ่งต่าง ๆ ในแนวตั้งโดยไม่ต้องใช้คลาส bootstrap เพียงแค่ย้ายไป - มีคำตอบอื่น ๆ อีกมากมายให้คุณใช้ที่นี่ ฉันไม่เห็นว่าทำไมคุณถึงติดใจเรื่องนี้ - นี่คือฟอรัมสำหรับความคิดทั้งหมดที่จะช่วยได้ - ไม่ใช่แค่คำตอบเดียว มันเป็นเรื่องที่ผู้ใช้เช่นคุณเสียเว็บไซต์นี้ได้โดย downvoting คำตอบที่นำเสนอวิธีการแก้ปัญหา แต่เพียงเพราะคุณไม่ชอบมัน

— พีท

@AlexNikonov เช่นกันถ้าคุณอ่านโพสต์ดั้งเดิมที่ไม่มีการแก้ไข (เมื่อฉันเพิ่มคำตอบ) คุณจะเห็น OP พยายามจัดกึ่งกลางโดยไม่ต้องใช้คลาสบูทสแตรปดังนั้นในเวลาตอบรับสิ่งนี้ถูกต้อง

— Pete

23

การติดตาม bootstrap 4 คลาสช่วยฉันแก้ปัญหานี้

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

— มาโนจ
แหล่งที่มา

1

นั่นไม่ได้อยู่ตรงกลาง div ของฉันในแนวตั้งแม้ว่า

— รุ่งอรุณ

คุณช่วยอธิบายเกี่ยวกับรหัส css ของคุณได้ไหม แชร์ตัวอย่างของมันฉันจะตรวจสอบปัญหาที่คุณกำลังเผชิญ

— Manoj

12

เนื่องจากข้อใดข้อหนึ่งข้างต้นไม่ได้ผลสำหรับฉันฉันจึงเพิ่มคำตอบอื่น

เป้าหมาย: เพื่อจัดแนว div ในแนวตั้งและแนวนอนโดยใช้ bootstrap 4 flexbox class

ขั้นตอนที่ 1: ตั้ง div 100vhนอกสุดของคุณเพื่อความสูงของ ตั้งค่าความสูงเป็น 100% ของความสูง Veiwport หากคุณไม่ทำเช่นนี้จะไม่มีอะไรเกิดขึ้น การตั้งค่าให้มีความสูงเท่ากับ100%สัมพันธ์กับพาเรนต์เท่านั้นดังนั้นหากพาเรนต์ไม่เต็มความสูงของวิวพอร์ตจะไม่มีการทำงานใด ๆ ในตัวอย่างด้านล่างฉันตั้งค่าร่างกายเป็น 100vh

ขั้นตอนที่ 2: ตั้งค่า div container ให้เป็น flexbox container ด้วยd-flexคลาส

ขั้นตอนที่ 3: จัดกึ่งกลางของแนวนอนให้ตรงกับjustify-content-centerคลาส

ขั้นตอนที่ 4: ตั้งศูนย์กลางในแนวตั้งด้วย align-items-center

ขั้นตอนที่ 5: เรียกใช้หน้าดู div ของคุณในแนวตั้งและแนวนอน

โปรดทราบว่าไม่มีคลาสพิเศษที่จำเป็นต้องตั้งค่าไว้บน div ที่อยู่กึ่งกลางตัวเอง (div ลูก)

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

— Greg Gum
แหล่งที่มา

@AjayKumar คุณต้องการแบ่งปันการเปลี่ยนแปลงของคุณหรือไม่

— เกร็กกัม

ขอบคุณโดยเฉพาะ100vhเคล็ดลับช่วยฉันได้มาก Bootstrap ยังมีvh-100คลาสสำหรับสิ่งนี้

— svens

10

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

— เนทเบียร์
แหล่งที่มา

5

ฉันได้ลองคำตอบทั้งหมดจากที่นี่ แต่พบที่นี่คือความแตกต่างระหว่างh-100และ vh-100 นี่คือวิธีการแก้ปัญหาของฉัน:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

— AlexNikonov
แหล่งที่มา

4

ใน Bootstrap 4 (เบต้า), align-middleการใช้งาน อ้างถึงBootstrap 4 เอกสารเกี่ยวกับการจัดตำแหน่งแนวตั้ง :

เปลี่ยนการจัดตำแหน่งขององค์ประกอบด้วย ยูทิลิตี้การจัดตำแหน่งแนวตั้ง โปรดทราบว่าแนวตั้งชิดจะมีผลต่ออินไลน์ , อินไลน์บล็อก , อินไลน์ตารางและเซลล์ของตารางธาตุ

เลือกจาก.align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottomและ.align-text-topตามความจำเป็น

— vallismortis
แหล่งที่มา

4

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

— Tariqul_Islam
แหล่งที่มา

รูปของคุณทำให้ฉัน thik stackoverflow เริ่มต้น advs: D

— AlexNikonov

4

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

บรรทัดนี้เป็นที่ที่มหัศจรรย์ที่เกิดขึ้น<div class="col-md-6 my-auto">ที่my-autoจะศูนย์เนื้อหาของคอลัมน์ วิธีนี้ใช้งานได้ดีกับสถานการณ์เช่นตัวอย่างโค้ดด้านบนซึ่งคุณอาจมีภาพขนาดตัวแปรและจำเป็นต้องมีข้อความในคอลัมน์ให้อยู่ในแนวที่ถูกต้อง

— ปล้น
แหล่งที่มา

3

ฉันทำแบบนี้กับ Bootstrap 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

— webjay
แหล่งที่มา

2

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

— อนุวงศ์
แหล่งที่มา

@AjayKumar การเพิ่มflex-grow-1คลาสลงในการ์ดช่วยป้องกันไม่ให้มันลดขนาดลง

— เฟรด

1

จัดเรียงแนวตั้งการใช้ bootstrap 4 คลาสนี้:

parent: d-table

และ

child: d-table-cell & align-middle & text-center

เช่น:

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

และถ้าคุณต้องการให้ผู้ปกครองเป็นวงกลม:

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

คลาส css ที่กำหนดเองสองคลาสใดมีดังนี้:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

การใช้งานขั้นสุดท้ายสามารถเป็นเช่น:

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

— Jafar Amini
แหล่งที่มา

0

วางเนื้อหาของคุณไว้ในคอนเทนเนอร์ flexbox ที่สูง 100% เช่น h-100 จากนั้นปรับเนื้อหาจากส่วนกลางโดยใช้คลาสjustify-content-center

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

— Mwiza
แหล่งที่มา

-1

ใช้.my-auto(bootsrap4) คลาส css ใน div เล็กน้อย

— ปรีชานประทีป
แหล่งที่มา

-2

ใน Bootstrap 4.1.3:

สิ่งนี้ใช้ได้ผลกับฉันเมื่อฉันพยายามจัดตำแหน่งป้ายรองเท้าให้อยู่ตรงกลางcontainer > row > columnถัดจากh1ชื่อ

สิ่งที่ทำงานได้ง่าย ๆ css:

.my-valign-center {
  vertical-align: 50%;
}

หรือ

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

— phyatt
แหล่งที่มา