标题没有垂直居中于野生动物园

时间：2016-12-19 14:50:12

标签： html css

在Chrome上我的网站就像它应该的那样工作，但是在safari上打开相同的网站，第一个标题不是垂直居中的。 有什么建议吗？

我知道克服这种情况的方法是使用填充顶部，但我更喜欢另一种解决方案。 

/*body*/
html, body {
	font-size: 100%;
	height: 100%;
	font-family: 'Lato', sans-serif;
	font-weight: 200;
}

/*nav*/
.navbar {
	background: #fff;
	border-bottom: solid #6ed3cf 2px;
	margin: 0;

	/*Kun on scroll!!!
	-moz-box-shadow:    0 2px 0 0 #6ed3cf;
    -webkit-box-shadow: 0 2px 0 0 #6ed3cf;
    box-shadow:         0 2px 0 0 #6ed3cf;
    */
}


.navbar p {
	color: black;
	font-weight: 500;
}

.container-fluid {
	padding-left: 25px;
	padding-right: 25px;
}

.navbar-default .navbar-nav>li>a {
	color: black;
}

.navbar-default .navbar-nav>li {
	border-bottom: solid transparent 2px;
}

.navbar-default .navbar-nav>li>a:hover {
	color: #6ed3cf;
}

/*
.navbar-default .navbar-nav>li>a:active {
	color: #6ed3cf;
}
*/

.navbar-default .navbar-toggle .icon-bar {
	background: black;
	-webkit-transition: width .8s, height .8s, -webkit-transform .8s; /* Safari */
    transition: width .8s, height .8s, transform .8s;
}



.navbar-default .navbar-toggle {
	border: none;
	background: transparent;
}

.navbar-default .navbar-toggle:hover {
	background: transparent;
}

.navbar-default .navbar-toggle:visited {
	background: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
	width: 22px;
	transition: all 0.2s;
}

.navbar-default .navbar-toggle .top-bar {
	transform: rotate(45deg);
    transform-origin: 10% 10%;
}

 .navbar-default .navbar-toggle .middle-bar {
    opacity: 0;
  }

  .navbar-default .navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }

  .navbar-toggle.collapsed .top-bar {
  	transform: rotate(0);
  }

   .navbar-toggle.collapsed .middle-bar {
    opacity: 1;
  }

  .navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
  }

  #topper {
  	outline: none;
  }

/*Header*/
.header {
	/*/Users/jonashansen/Desktop/hjemmeside/img*/
	background: url(/img/arg.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	box-shadow: inset 0 0 0 1000px rgba(60, 195, 191, 0.7);
	min-height: 100%;
	display:flex;
  	justify-content:space-between;
  	align-items: center;
}

#rowheader h1 {
	font-weight: 200;
	text-align: center;
	color: #fff;
	font-size: 3em;
}

#rowheader h2 {
	font-weight: 200;
	text-align: center;
	color: #fff;
	font-size: 2em;
}
/*
#rowheader h1 {
	font-family: 'Lato', sans-serif;
	font-size: 3em;


}
*/

/*Section1*/
#section1 {
	text-align: center; 
	margin-top: 3em;
	margin-bottom: -4em; 
	height: auto;
	position: relative;
}

.anchor {
	display: block;
	height: 3em;
	visibility: hidden;	
}

#section1 h2 {
	font-size: 2em;
	font-weight: 200;
	text-align: center;
	padding: 0 2.5em 0.5em;
	display: block;
}

#section1 h3 {
	font-weight: 200;
}

#section1 p {
	line-height: 2em;
	padding: 1em 0 0;
}

#section1 a {
	color: #3DD0AC;
	text-decoration: none;
}

#section1 a:hover {
	color: black;
}

/*Section2*/
#section2 {
	line-height: 1.8em;
	height: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	position: relative;
}

#section2 h2 {
	font-size: 2em;
	font-weight: 200;
	text-align: center;
	padding: 0 2.5em 0.5em;
	display: block;
}

#section2 h3 {
	font-weight: 200;
}

#section2 p {
	padding: 0 0 0.5em;
	padding-bottom: 2em; 
}

#section2 a {
	color: #3DD0AC;
	text-decoration: none;
}

#section2 img {
	width: 100%;
    height: 100%;
}

#img-wrapper {
	display: inline-block;
	overflow: hidden;
}

#img-wrapper img {
	-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#img-wrapper img:hover {
	-webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
    transform:scale(1.1);
}

/*Section3*/
#section3 {
	height: 50%;
	background: #6ed3cf;
	text-align: center;
	padding: 0 0 0.5em;
	height: 20em;
}

#section3 h2 {
	font-size: 2em;
	font-weight: 200;
}

#section3 i {
	padding: 0.5em;
	color: black;
}

/*Footer*/
#footer {
	background:#fff;
	color: black;
	height: 6%;
	width: 100%;
	display: table;
}

#footer a {
	font-size: 0.8em;
  	text-align: center;
  	vertical-align: top;
  	display: none;
  	padding-top: 1.2em;
  	color: black;
  	font-weight: 500;
  	text-decoration: none;
}

#footer p {
  font-size: 0.7em;
  text-align: center;
  vertical-align: bottom;
  display: table-cell;
  padding-bottom: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Jonas Suonpera Hansen - Web developer</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<script type="text/javascript" src="js/main.js"></script>             
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="img/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/@media.css">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <a class="navbar-brand" id="topper" href="#"><p>&lt;&frasl;BY&#95;SUONPERA&gt;</p></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#About">About</a></li>
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#My_Work">My Work</a></li>
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#Contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!-- Header -->
	<div class="header">
		<div class="container" style="display:flex;justify-content:center;align-items:center;">
			<div id="rowheader">
				<h1>JONAS SUONPERA</h1>
				<h2>Web Developer</h2>
			</div>
		</div>
	</div>

<!-- Section1 -->
	<div id="section1" class="container">
	<span class="anchor" id="About"></span>
		<h2>About</h2>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<h3>Me</h3>
				<p>blablablablablablablablablabalbalbal</p>
				<p>Check out my <a href="#">Linkedin</a>, or <a href="/docs/Resume.pdf" download="Resume">download my resume</a> if you want to know more.</p><br><br>	
			</div>
		</div>			
	</div>



<!-- Section2 -->
	<div  id="section2" class="container">
	<span class="anchor" id="My_Work"></span>
		<h2>My Work</h2>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<div id="img-wrapper">
					<a href="#"><img src="/img/photographer.jpg"></a>
				</div>
				<h3>Photographer's Portfolio</h3>
				<p>blablablablabla<a href="#">Go check it out!</a></p>
			</div>
		</div>
	</div>

<!-- Section3 --> <!-- Brug scss til at vertical align text. Se her http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ -->
	<div id="section3" style="display:flex;justify-content:center;align-items:center;">
		<div>
		<span class="anchor" id="Contact"></span>
			<h2>Want to get in touch?</h2>	
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<p>blablablabla</p>
						<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>	
						<a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>		
					</div>
				</div>
			</div>
		</div>
	</div>


<!-- Footer -->
	<div id="footer">
		<a id="topper" href="#topper">BACK TO TOP</a>
		<p>Copyright &copy; 2016 Jonas </p>
	</div>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题