내가 하려고 center 내 컨테이너에 페이지를 사용하여 스트랩 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>
*도가 느려지는 경우가 있습니다. Vertical center 를 기준으로높이부모
경우 부모의 요소를'다시 시도하심이 없 정의 height,없음수직 중심으로 솔루션을 것입니다.
지금에 수직 중심에서 스트랩 4...
당신이 사용할 수 있는 새로운플렉스박스&기 유틸리티하는컨테이너 전체 높이고
표시:플렉스`. 이 옵션지't 요 CSS(제외하고는높이의 콘테이너(ie:html,체)해야 합 100%).
Option1자기 정렬 센터에서
플렉스박스 자녀
<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
Option2align--항목을 센터에서
플렉스박스 부모(.행
이표시:flex;flex-방향:행
)
<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
Option3정당화 콘텐츠 센터에서
플렉스박스 부모(.카드
는표시:flex;flex-방향:열
)
<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
에 더 많은 스트랩 4 수직 중심으로
이제 4 부트스트랩을 제공합 플렉스박스와[기타 유틸리티](http://v4-alpha.getbootstrap.com/utilities 다),많은 접근을 수직 맞춤입니다. http://www.codeply.com/go/WG15ZWC4lf
1 개의 수직 중심을 사용하여 자동윤:
하는 또 다른 방법으로 수직한 액세스를 제공하기 위해 사용하는나-자동
. 이 센터는 요소는 그 안's 컨테이너입니다. 예를 들어,h-100
게 행 전체 높이,그리고나-자동
이 수직 중심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>
나-자동
나타냅백에 수직 y 축에 해당합니다:
margin-top: auto;
margin-bottom: auto;
2 개의 수직 중심으로 플렉스박스:
이후 스트랩 4.행는
지금표시:플렉스
당신은 단순히 사용하는자기 정렬 센터에
어떤 열을 수직 중심을...
<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>
또는,사용은맞추--항목을 센터에서
전체.행
을 수직으로 중앙에 정렬 모든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>
3-수직 중심을 사용하여 표시 Utils:
스트랩 4디스플레이 utils사용할 수 있는표시:테이블에
,표시:테이블-셀룰라
,표시:인라인
,등등....이러한 사용할 수 있는수직 정렬 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>
수직 센터도 있습니다.행습니다.컨테이너
수직 중심에서<div>
수직 센터 안에 아이의 부모
수직 센터 전체 화면을 돌아다
*도가 느려지는 경우가 있습니다. 언급 했습니다.
기억하는 수직 중심을 기준으로높이의 부모요소입니다. 하려면 센터에서는 전체 페이지에서 대부분의 경우,이해야 CSS...
body,html {
height: 100%;
}
거나 사용하는최소 높이:100vh
(min-vh-100
Bootstrap4.1+)에 부모 또는 컨테이너입니다. 하려는 경우에는 센터 아동 요소의 내부에 부모입니다. 부모가 정의되어 있어야 합니다height.
도:
https://stackoverflow.com/questions/43313090/vertical-alignment-in-bootstrap-4
https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment
기 때문에 상기의 아무도 나를 위해 일했다,내가 추가하는 또 다른 대답이다.
목표:수직 및 수평으로 정렬 div 페이지에서 사용하는 스트랩 4 플렉스박스 클래스입니다.
1 단계:설정하는 가장 바깥쪽 div 높이의100vh
. 이 설정 높이의 100%Veiwport 높이입니다. 지 않는 경우't 이렇게 아무것도 다른 사람 작동합니다. 설정 높이의100%
만 부모에 상대적인 경우,부모이지의 전체 높이트 아무것도 작동합니다. 아래 예에서 나는 설정을 몸 100vh.
2 단계:컨테이너 div 것 플렉스박스 컨테이너와d-flex
클래스입니다.
3 단계:중심 div 수평으로정당화 콘텐츠센터
클래스입니다.
4 단계:중심 div 수직으로맞추--항목을 중심
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>
에서 부트스트랩 4(beta),사용하는정렬-중동
. 참조Bootstrap4 에 대한 문서가 수직 정렬:
맞춤 변경하는 요소를수직 정렬 유틸리티입니다. 참고는 수직 정렬에만 영향을 미칩inline, inline-block,inline-테이블,and테이블 셀요소입니다.
에서 선택
.맞추-기본
,.맞춰 정상
,.맞 중간
,.정렬 아래
,.맞추는 텍스트 아래쪽
,그리고.맞-text-top
으로 필요합니다.
<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>
<!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>
<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-자동">
,내-자동
중심의 콘텐츠 열입니다. 이 작품은 위대한 상황에서 샘플 코드는 위의 수있는 변수 크기의 이미지 및 텍스트에서 오른쪽에 열렬합니다.