CODEWITHSUNDEEP
css
user11210768
user11210768

Reputation:

How I can put text in center

I'm try create simple website for improve my skills in HTML and CSS languages but I don't know how to put this text in center please check image below

Preview image

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.orange {
  width: 50%;
  height: 100%;
  background-color: #f5a130;
  background-size: cover;
  float: left;
}

.black {
  width: 50%;
  height: 100%;
  background-color: #383838;
  background-size: cover;
  float: right;
}

.title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #454;
  text-align: center;
  letter-spacing: 20px;
}
<body>

  <div class="orange"></div>

  <div class="black"></div>

  <h1 class="title">TEST WEBSITE</h1>

</body>

I tried use text-align but It's go to bottom

Upvotes: 0

Views: 71

Answers (1)

godfather
godfather

Reputation: 1563

you should work with positions relative and absolute so you can control it i added : .title { position:relative; bottom:50%;}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.orange {
  width: 50%;
  height: 100%;
  background-color: #f5a130;
  background-size: cover;
  float: left;
}

.black {
  width: 50%;
  height: 100%;
  background-color: #383838;
  background-size: cover;
  float: right;
}

.title {
position:relative;
bottom:50%;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #454;
  text-align: center;
  letter-spacing: 20px;
}
<body>

  <div class="orange"></div>

  <div class="black"></div>

  <h1 class="title">TEST WEBSITE</h1>

</body>

Upvotes: 1

Related Questions