애니메이션 텍스트를 중앙에 배치하는 데 문제가 div있습니다. 창 크기를 조정하면 중간에 머 무르지 않고 위쪽으로 이동합니다. 또한 화면의 1/3에서 원하지만 그리드로 시도했지만 많이하지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sam</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
#body1 {
font: normal 40px/50px Arial, sans-serif;
color: #999;
}
p {
height: 50px;
float: left;
margin-right: 0.3em;
}
b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
}
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
#elem {
background: url('./drawable/headerBg.jpg') center center no-repeat;
background-size: 100px 150px;
}
a,
a:focus,
a:hover {
color: #fff;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
html,
body {
/*css for full size background image*/
background: url(https://drscdn.500px.org/photo/191618715/q%3D80_m%3D2000/b08d920f4f2d248a837e236e1f5e55af) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #060;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%;
/* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav>li {
display: inline-block;
}
.masthead-nav>li+li {
margin-left: 20px;
}
.masthead-nav>li>a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255, 255, 255, .95);
border-bottom: 2px solid transparent;
}
.masthead-nav>li>a:hover,
.masthead-nav>li>a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav>.active>a,
.masthead-nav>.active>a:hover,
.masthead-nav>.active>a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999;
/* IE8 proofing */
color: rgba(255, 255, 255, .5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
/* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav">
<li class="active">
<a href="#" target="_blank">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="body1">
<p>I'm a</p>
<b>
<span1>
web pls<br />
keyboard warrior<br />
student<br />
sdfsdf developer<br />
df
</span1>
</b>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- Page Content -->
<!-- /.row -->
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
33.33334 % 컬럼 :
<div class="col-lg-4 col-sm-12">
col 1
</div>
<div class="col-lg-4 col-sm-12">
col 2
</div>
<div class="col-lg-4 col-sm-12">
col 3
</div>
div를 중앙에 배치하려면 다음을 시도하십시오.
text-align:center;
또는
display:block;
margin: 0 auto;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다