Question

我对编码和学校这么新，我们需要编写一个网站代码。现在我慢慢地进入它，但我无法将导航和标题放到中心位置。在我的13英寸笔记本电脑上，它看起来都很好，但在更大的电脑上，它不再是中心。

这是该网站的链接，现在一团糟：http://st358373.cmd16c.cmi.hanze.nl/portfolio.html

更新了问题：

如何让我的标题和副标题居中？

HTML code：

<div class="titel">Portfolio</div>
            <div class="subtitel">Hier is een selectie van recentelijk werk.</div>

CSS：

.titel {
font-family: Raleway;
font-size: 52px;
color: #3b3d40;
text-align: center;
font-weight: 700;
margin-top: 20px;
}

.subtitel {
    font-family: Adobe Caslon Pro;
    font-size: 18px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
    }

Answer 1

一种方法是：

ul.topnav li {
   /* float: left; Remove this. */
   display: inline-block;
}

ul.topnav {
   text-align: center;
}

.titel {
  font-family: Raleway;
  font-size: 52px;
  color: #3b3d40;
  font-weight: 700;
  text-align: center;
  margin-top: 20px;
  width: 100%;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  font-family: Raleway;
  font-weight: 500;
  /* float: center; */
  text-align: center;
  position: center center;
}
ul.topnav li {
  /* float: left; */
  display: inline-block;
}
ul.topnav li a {
  display: inline-block;
  color: #3b3d40;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 10px;
  letter-spacing: 2px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}

<ul class="topnav" id="myTopnav">
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="portfolio.html">PORTFOLIO</a>
    <div style="margin-top:-12px;border-bottom:1px solid #3b3d40;height:1px;"></div>
  </li>
  <li><a href="blog.html">BLOG</a>
  </li>
  <li><a href="projecten.html">PROJECTEN</a>
  </li>
  <li><a href="ontwerpproces.html">ONTWERPPROCES</a>
  </li>
  <li><a href="verantwoording.html">VERANTWOORDING</a>
  </li>
  <li><a href="over.html">OVER</a>
  </li>
  <li><a href="contact.html">CONTACT</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>


<div class="titel">Portfolio</div>

Answer 2

使用flex。隐形项和右侧div应具有相同的宽度。您可以在invisible div中添加一些内容，然后移除visibility:hidden;

.header{
  height:60px;
  background-color:green;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.header>div:first-child {
  margin-right: auto;
  visibility: hidden;
  width:100px;
}
.header .navigation{
  height:50px;
  margin:0;
  text-align:center;
  color:white;
}
.header .right{
  margin:0;
  padding:0;
  margin-left:auto;
  width:100px;
}
.header .right img{
  width:30px;
  margin:0 5px;float:right;
}

<div class="header">
  <div>invisible</div>
  <div class="navigation">Navigation Bar</div>
  <div class="right">
    <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <img src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
  </div>
</div>

导航和标题不会成为中心

2 个答案: