CODEWITHSUNDEEP
htmlcss
Stuart Little
Stuart Little

Reputation: 17

HTML Wont center

Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me. screenshot of issue: https://i.sstatic.net/QtZhX.jpg

If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down

My main focus for this post is to make the text in the centre body box to basically have the title

test

to be in the centre and then the

test

to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.

I also want it so the box is fixed to where it is and it doesn't ever move. 

* /*Main Navbar (at top) */ .navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkgrey;
  border-bottom: 0.05px solid black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover:not(.active) {
  background-color: #a0a0a0;
  border-bottom: 0.05px solid black;
  border: 0.05px solid black;
}

/*The body in the center of website */
.body-container {
  height: 100%;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.menu {
  padding: 20px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  background-color: darkgrey;
  text-decoration-color: black;
}

.body-container .menu .title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 50%;
 
}
.body-container .body-text {

  text-align: center;
  margin-top:10%;
  

}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/header.css">
    <link rel="stylesheet" type="text/css" href="./css/site.css">
  </head>

<body>
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float: right;  "><a href="#about">Login</a></li>
  </ul>

  <div class="body-container">
    <div class="menu">
      <div class="title">
        <h1>test</h1>
      </div>
      <div class="body-text">
        <p>test </p>
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Views: 67

Answers (3)

Rodrigo Linkweb
Rodrigo Linkweb

Reputation: 101

I always use margin: 0 auto; and it works almost all the times

Upvotes: 0

user2880072
user2880072

Reputation:

Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.

Have a look into this Codepen. https://codepen.io/dmnktoe/pen/wOyxor

(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)

Upvotes: 1

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

I tried this and worked:

.body-container .menu .title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
.body-container .body-text {
    text-align: center;
    margin: auto;
    display: block;
    position: absolute;
    top: 115px;
    left: 315px;

Upvotes: 0

Related Questions