CODEWITHSUNDEEP
htmlcss
user7421500
user7421500

Reputation:

Navigation and title won't center

I'm so new to coding and for school we need to code a website. Right now I'm slowly rolling into it, but I can't get my navigation and title to center. On my 13 inch laptop it all looks fine, but on a bigger pc it isn't centered anymore.

This is the link to the website, it's a mess right now: http://st358373.cmd16c.cmi.hanze.nl/portfolio.html

Updated question:

How do I get my title and subtitle centered?

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;
    }

Upvotes: 0

Views: 86

Answers (2)

ab29007
ab29007

Reputation: 7766

Use flex. The invisible item and the right div should have same width. You can add some content in invisible div and remove 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>

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

One way would be:

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>

Upvotes: 1

Related Questions