Es mēģinu centrēt savu konteineru lapas vidū, izmantojot Bootstrap 4. Līdz šim man tas nav izdevies. Būtu pateicīgs par jebkādu palīdzību.
Es to esmu izveidojis Codepen.io, lai jūs, puiši, varētu ar to paspēlēties un darīt man zināmu, kas darbojas, jo man gandrīz nav ideju...
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>
I Svarīgi! *Vertikālais centrs ir relatīvs attiecībā pret galvenā elementa augstumu*.
Ja elementa, kuru cenšaties centrēt, vecākajam elementam nav definēts augstums, neviens no vertikālās centrēšanas risinājumiem nedarbosies!
Tagad par vertikālo centrēšanu Bootstrap 4...
Jūs varat izmantot jauno flexbox & size utilities, lai padarītu konteineri
pilna augstuma un display: flex
. Šīs opcijas neprasa papildu CSS (izņemot to, ka konteinera (t. i., html, body) augstumam jābūt 100%).
Variants Nr. 1 align-self-center
uz flexbox child
<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
Atbilde 2 align-items-center
par flexbox parent (.row
ir 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
Variants 3 justify-content-center
uz flexbox vecākā (.card
ir 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
Dar vairāk par Bootstrap 4 vertikālo centrēšanu
Tagad, kad Bootstrap 4 piedāvā flexbox un citus palīgrīkus, ir daudzas pieejas vertikālajam izvietojumam. izlīdzināšanai. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertikālais centrējums, izmantojot automātiskās apmales:
Vēl viens vertikālās centrēšanas veids ir izmantot my-auto
. Tas centrēs elementu tā konteinera iekšpusē. Piemēram, h-100
padarīs rindu pilnā augstumā, un my-auto
vertikāli centrēs kolonnu 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>
Vertikālā centrēšana, izmantojot automātiskās apmales Demo
my-auto
attēlo vertikālās y ass malas un ir līdzvērtīgs:
margin-top: auto;
margin-bottom: auto;
2 - Vertikālais centrs ar Flexbox:
Tā kā Bootstrap 4 .row
tagad ir display:flex
, jūs varat vienkārši izmantot align-self-center
jebkurā kolonnā, lai to vertikāli centrētu...
<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>
vai izmantot align-items-center
visai .row
, lai vertikāli centrētu visas col-*
rindā...
<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>
Vertikāli centrēt dažāda augstuma kolonnas Demo
Skatiet šo jautājumu/A, lai centrētu, bet saglabātu vienādu augstumu
3 - Vertikālā centrēšana, izmantojot displeja palīgrīkus:
Bootstrap 4 ir display utils, ko var izmantot display:table
, display:table-cell
, display:inline
u. c.. Tos var izmantot kopā ar vertikālā izlīdzinājuma utils, lai izlīdzinātu rindas, rindas bloka vai galda šūnu elementus.
<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>
Vertikālā centrēšana, izmantojot displeja palīgrīkus Demo
Vairāki piemēri
Vertikāli centrēt attēlu <div>
Vertikāli centrēt .row in .container
Vertikālais centrs un apakšdaļa <div>
Vertikālais centrs bērns vecāka iekšpusē
Vertikālā centra pilnekrāna jumbotrons
I Svarīgi! **Vai es minēju augstumu?
Atcerieties, ka vertikālā centrēšana ir relatīva attiecībā pret vecākā elementa augstumu. Ja vēlaties centrēt visu lapu, vairumā gadījumu tam jābūt jūsu CSS...
body,html {
height: 100%;
}
Vai arī izmantojiet min-height: 100vh
(min-vh-100
lietotnē Bootstrap 4.1+) vecākajam elementam/konteinerim. Ja vēlaties centrēt atvasināto elementu vecāka elementa iekšpusē. Vecākam jābūt noteiktam augstumam.
Skatiet arī:
https://stackoverflow.com/questions/43313090/vertical-alignment-in-bootstrap-4
https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment