0
This是我整天編碼的網站，但我無法將標誌右側的文字置於標誌的中心。從標題中的圖像中心文字右側
任何人都可以幫忙，我試過尋找答案，但沒有找到一個。？
這是CSS
/*
Name: SunMissive
Date: 13, 07, 2013
Discription: Responsive Html5 And css3 site
Version: 1.0
Auther: David Kvindesland
Auther URL: http://www.tvitre.org
*/
body {
background-image: url("http://i.imgur.com/5exXQso.png");
color: #000305;
font-size: 87.5%; /*base font size is 14px */
font-family: Calibri, Arial, 'lucida sans unicode';
line-height: 1.5;
text-align: left;
}
@font-face {
font-family: 'pacificoregular';
src: url('pacificothingk.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active{
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: auto;
height: 30%;
vertical-align: middle;
margin: 2% 0%;
}
.mainheader span {
text-align;
font-size: 500%;
font-style: Arial;
font-weight: bold;
font-family: pacificoregular;
}
.mainheader nav {
background-color: #9C9C9C;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #fff;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
transition: 0.5s ease-in-out;
background-color: #4F9BE8;
text-shadow: none;
}
.mainheader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content: {
width: 70%;
float: left;
}
.topcontent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin: 2%;
}
.bottomcontent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin: 2%;
}
.mainfooter {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2%;
text-align: center
}
HTML
<!DOCTYPE html>
<html lang="NO">
<head>
<title>SunMissive</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="body">
<header class="mainheader">
<img src="http://i.imgur.com/M8lrFtm.gif" alt="tvitre logo"/>
<span>SunMissive.no</span>
<nav><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Why</a></li>
<li><a href="#">Contact</a></li>
</nav></ul>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="first post">Viderutviklet Design</a></h2>
</header>
<footer>
<p class="post-info">Dette inlegget er skrevet av David 12.07.2013</p>
</footer>
<content>
<p>
Denne siden er bare laget som demo, den er av mitt eget arbeid og du kan derfor ikke bruke den videre. takk. Aliquam congue faucibus. Donec non mi eu risus vehicula accumsan sed nec nunc. Pellentesque malesuada tellus in consectetur laoreet. Donec volutpat adipiscing blandit. Praesent in vestibulum turpis. Praesent pulvinar semper nulla, a imperdiet ligula auctor quis. Fusce tempor sodales dignissim. Aenean lobortis sapien blandit blandit laoreet. Quisque et purus iaculis massa tempus imperdiet. Aliquam accumsan tristique ipsum, id euismod elit convallis ut. Nullam lobortis elit lorem.
</p>
<p>
c sed viverra orci. Suspendisse sed diam quam. Praesent in lacus nec enim euismod posuere eget sit amet orci. In sed viverra turpis, at sagittis sapien. Fusce aliquam turpis et sapien tristique commodo id in arcu. Praesent feugiat lectus ligula, quis condimentum felis pharetra vel. Fusce rutrum commodo gravida. Praesent vel consectetur dolor. Mauris eu tempor nisi. Vestibulum id eros vel est vulputate interdum. Quisque a ipsum malesuada, mollis metus id, lacinia odio. Suspendisse egestas felis non nisi faucibus, sit amet euismod lorem congue. Pellentesque tempor odio ac dapibus vehicula.
</p>
</content>
</article>
<article class="bottomcontent">
<header>
<h2><a href="#" title="second post">Her kommer det mer!</a></h2>
</header>
<footer>
<p class="post-info">Dette inlegget er skrevet av David 10.07.2013</p>
</footer>
<content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam congue faucibus. Donec non mi eu risus vehicula accumsan sed nec nunc. Pellentesque malesuada tellus in consectetur laoreet. Donec volutpat adipiscing blandit. Praesent in vestibulum turpis. Praesent pulvinar semper nulla, a imperdiet ligula auctor quis. Fusce tempor sodales dignissim. Aenean lobortis sapien blandit blandit laoreet. Quisque et purus iaculis massa tempus imperdiet. Aliquam accumsan tristique ipsum, id euismod elit convallis ut. Nullam lobortis elit lorem.
</p>
</div>
</div>
<footer class="mainfooter">
<p>© David Kvindesland - 2013 - [email protected]</p>
</footer>
</body>
請閱讀此：http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-鏈接到它 –
我添加了代碼。 –