标题不是居中的，但页面的其余部分是

时间：2016-07-13 21:49:25

标签： html css html5 css3

为了弄清楚这几天为什么标题中你可以看到标题：https://gyazo.com/5eb973585ce428f9d34bc7bd46aec14c并不是以页面的其他部分为中心，就像下面的箭头一样图片。

＆＃13;
＆＃13; 
@font-face {
  font-family: 'cabinregular';
  src: url('font1/cabin-regular-webfont.woff2') format('woff2'), url('font1/cabin-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansregular';
  src: url(font2/opensans-regular-webfont.woff2) format("woff2"), url(font2/opensans-regular-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'edoregular';
  src: url(font3/edo-webfont.woff2) format("woff2"), url(font3/edo-webfont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
}
.header {
  background-color: white;
  width: 100%;
  height: 70px;
  position: fixed;
  z-index: 999;
  -webkit-box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
}
.headeritems {
  text-align: center;
}
.navigationleft {
  vertical-align: top;
  display: inline-block;
}
.navigationleft ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.navigationleft li {
  display: inline;
}
.navigationleft li a {
  color: #BEBEBE;
  display: inline-block;
  padding: 24px 40px 0px 40px;
  text-decoration: none;
  font-family: cabinregular;
  font-size: 16px;
  transition: color .20s ease-in-out;
  -moz-transition: color .20s ease-in-out;
  -webkit-transition: color .20s ease-in-out;
}
.navigationleft li a:hover {
  color: #00C4FF;
}
.logo {
  display: inline-block;
  padding: 10px 20px 0px 20px;
}
.navigationright {
  vertical-align: top;
  display: inline-block;
}
.navigationright ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.navigationright li {
  display: inline;
}
.navigationright li a {
  color: #BEBEBE;
  display: inline-block;
  padding: 24px 40px 0px 40px;
  text-decoration: none;
  font-family: cabinregular;
  font-size: 16px;
  transition: color .20s ease-in-out;
  -moz-transition: color .20s ease-in-out;
  -webkit-transition: color .20s ease-in-out;
}
.navigationright li a:hover {
  color: #00C4FF;
}
.container {
  background-image: url(images/container.jpg);
  background-repeat: no-repeat;
  width: cover;
  height: 650px;
}
.content {
  margin: 0 auto;
  width: 650px;
  padding-top: 250px;
  color: white;
  font-family: edoregular;
  font-size: 100px;
  text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.5);
}
.arrow1 {
  margin: 0 auto;
  width: 60px;
  margin-top: 170px;
  transition: padding-top .20s ease-in-out;
  -moz-transition: padding-top .20s ease-in-out;
  -webkit-transition: padding-top .20s ease-in-out;
}
.arrow1:hover {
  padding-top: 20px;
}
.contentabout {
  margin: 0 auto;
  width: 650px;
  height: 550px;
  padding-top: 100px;
  font-family: edoregular;
  text-align: justify;
}
.contentabout h1 {
  height: 50px;
  color: #2D2D2D;
  border-bottom: 1px solid #EEEEEE;
}
.contentabout p {
  padding-top: 30px;
  font-family: open_sansregular;
  font-size: 15px;
}
.arrow2 {
  margin: 0 auto;
  width: 60px;
  margin-top: 145px;
  transition: padding-top .20s ease-in-out;
  -moz-transition: padding-top .20s ease-in-out;
  -webkit-transition: padding-top .20s ease-in-out;
}
.arrow2:hover {
  padding-top: 20px;
}
.containerportfolio {
  height: 720px;
  background-image: url(images/containerportfolio.jpg);
}
.contentportfolio {
  margin: 0 auto;
  width: 709px;
  padding-top: 70px;
  font-family: edoregular;
  color: white;
  text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.5);
}
.contentportfolio h1 {
  height: 50px;
  border-bottom: 1px solid white;
}
.portfolioitems {
  height: 400px;
  border-bottom: 1px solid white;
}
.portfolioitems p {
  text-align: center;
  font-family: open_sansregular;
  font-size 30px;
  color: white;
  padding-top: 100px;
}
.byggfram {
  width: 220px;
  height: 124px;
  opacity: 0.7;
  display: inline-block;
  margin-top: 5px;
  -webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .20s ease-in-out;
  -moz-transition: opacity .20s ease-in-out;
  -webkit-transition: opacity .20s ease-in-out;
}
.byggfram:hover {
  opacity: 1;
}
.classie {
  width: 220px;
  height: 124px;
  opacity: 0.7;
  display: inline-block;
  margin-left: 20px;
  -webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .20s ease-in-out;
  -moz-transition: opacity .20s ease-in-out;
  -webkit-transition: opacity .20s ease-in-out;
}
.classie:hover {
  opacity: 1;
}
.anderssonsvensson {
  width: 220px;
  height: 124px;
  opacity: 0.7;
  display: inline-block;
  margin-left: 20px;
  -webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .20s ease-in-out;
  -moz-transition: opacity .20s ease-in-out;
  -webkit-transition: opacity .20s ease-in-out;
}
.anderssonsvensson:hover {
  opacity: 1;
}
.arrow3 {
  margin: 0 auto;
  width: 60px;
  margin-top: 85px;
  transition: padding-top .20s ease-in-out;
  -moz-transition: padding-top .20s ease-in-out;
  -webkit-transition: padding-top .20s ease-in-out;
}
.arrow3:hover {
  padding-top: 20px;
}
.containercontact {
  height: 650px;
}
.contact {
  margin: 0 auto;
  width: 650px;
  padding-top: 70px;
}
.titlecontact {
  text-align: center;
}
.contact h1 {
  font-family: edoregular;
  color: #2D2D2D;
  height: 50px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/images/favicon.ico" rel="shortcut icon">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Loom | Home</title>
</head>

<body>
  <a id="home" name="home"></a>
  <a id="home" name="top"></a>
  <div class="header">
    <div class="headeritems">
      <div class="navigationleft">
        <ul>
          <li>
            <a href="#home" class="smoothScroll">Home</a>
          </li>
          <li>
            <a href="#about" class="smoothScroll">About</a>
          </li>
        </ul>
      </div>
      <div class="logo">
        <a href="#home">
          <img src="css/images/loomlogo.svg">
        </a>
      </div>
      <div class="navigationright">
        <ul>
          <li>
            <a href="#portfolio" class="smoothScroll">Portfolio</a>
          </li>
          <li>
            <a href="#contact" class="smoothScroll">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="content">
      Loom Is Lemon
      <div class="arrow1">
        <a href="#about" class="smoothScroll">
          <img src="css/images/arrowdown.svg" style="width:60px">
        </a>
      </div>
    </div>
  </div>
  <a id="about" name="about"></a>
  <div class="containerabout">
    <div class="contentabout">
      <h1>Greetings from Sweden!</h1>
      <p>Hello</p>
      <div class="arrow2">
        <a href="#portfolio" class="smoothScroll">
          <img src="css/images/arrowdown2.svg" style="width:60px">
        </a>
      </div>
    </div>
  </div>
  <a id="portfolio" name="portfolio"></a>
  <div class="containerportfolio">
    <div class="contentportfolio">
      <h1>Portfolio</h1>
      <div class="portfolioitems">
        <div class="byggfram">
          <img src="css/images/byggfram.png">
        </div>
        <div class="classie">
          <img src="css/images/classie.png">
        </div>
        <div class="anderssonsvensson">
          <img src="css/images/anderssonsvensson.png">
        </div>
        <p>More coming soon!</p>
      </div>
      <div class="arrow3">
        <a href="#contact" class="smoothScroll">
          <img src="css/images/arrowdown.svg" style="width:60px">
        </a>
      </div>
    </div>
  </div>
  <div class="containercontact">
    <div class="contact">
      <div class="titlecontact">
        <img src="css/images/loomlogo2.svg">
        <h1>Contact Me!</h1>
      </div>

    </div>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="javascript/smoothscroll.js"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：-1)

你可以试试：

<center></center>

围绕未居中的部分。

相关问题
最新问题