Vairāk
Vertikālā izlīdzināšana centrā programmā Bootstrap 4
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>
263
3
I Svarīgi! *Vertikālais centrs ir relatīvs attiecībā pret galvenā elementa augstumu*.
Tagad par vertikālo centrēšanu Bootstrap 4...
Jūs varat izmantot jauno flexbox & size utilities, lai padarītu
konteineri
pilna augstuma undisplay: 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 childhttps://www.codeply.com/go/fFqaDe5Oey
Atbilde 2
align-items-center
par flexbox parent (.row
irdisplay:flex; flex-direction:row
)https://www.codeply.com/go/BumdFnmLuk
Variants 3
justify-content-center
uz flexbox vecākā (.card
irdisplay:flex;flex-direction:column
)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ā, unmy-auto
vertikāli centrēs kolonnucol-sm-12
.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:2 - Vertikālais centrs ar Flexbox:
2
Tā kā Bootstrap 4
.row
tagad irdisplay:flex
, jūs varat vienkārši izmantotalign-self-center
jebkurā kolonnā, lai to vertikāli centrētu...vai izmantot
align-items-center
visai.row
, lai vertikāli centrētu visascol-*
rindā...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.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...
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
varat vertikāli izlīdzināt savu konteineru, padarot vecāku konteineru lokanu un pievienojot
align-items:center
:Atjaunināts pildspalva