Center <label> in the center of the screen

Asked

Viewed 3,134 times

-1

Hello someone can help me as I do to center these Labels?

PS: Text-align: center; does not work!

<label class="emp">IMM</label> <label class="service">Home Gateway</label>

You can see and test the code below:

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
*{
  margin: 0;
  padding: 0;
}
div#bar{
  background: #424041;
  font-size: 25px;
  border-bottom: 1px solid #f1f1f1;
}
.emp{
  font-weight: bold;
  color: #377486;
}
.service{
  font-weight: bold;
  color: #fff;
}
.login-page {
  width: 360px;
  padding: 4% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form .botao {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #377486;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form .botao:hover,.form .botao:active,.form .botao:focus {
  background: #336675;
}
body {
  background: #4d4b4c; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #4d4b4c, #4d4b4c);
  background: -moz-linear-gradient(right, #4d4b4c, #4d4b4c);
  background: -o-linear-gradient(right, #4d4b4c, #4d4b4c);
  background: linear-gradient(to left, #4d4b4c, #4d4b4c);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}
.form .name{
  font-size: 20px;
  font-family: "Roboto", sans-serif;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.red{
  color: red;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- Não andamos a reboque dos que nos querem domar, para o futuro ser bem nosso e não sermos pele e osso -->
	<!-- judas vais rebentar judas vais rebentar tiro liro liro liro tiro liro liro lo vamos quaima-lo sem dó vamos queima-lo sem dó -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMM Home Gateway</title>
</head>
<body>
<div id="bar">
<label class="emp">IMM</label> <label class="service">Home Gateway</label>
</div>
<div class="login-page">
  <div class="form">
    <form class="login-form" id="login">
      <input type="text" placeholder="Utilizador:" autocomplete="off" name="user" id="user" />
      <input type="password" placeholder="Password" name="pass" id="pass" />
      <input type="hidden" name="ToProc" value="login-form" id="ToProc">
      <input type="submit" class="botao" value="Logar" id="entrar" />
    </form>
  </div>
</div>
</body>
</html>

html5 css3

  • Utilise display: inline-block, in class .emp. Because label does not behave like a letter by default.

2 answers

2

Just put one text-align: center; in div with id "bar" which results in the way that!

div#bar {
    background: #424041;
    font-size: 25px;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
}

1


From what I saw of your code, just put the div with id bar with 100% width and align center that will be centralized.

div#bar {
 width: 100%;
 text-align: center;
}

the other rules you already have, continue applying, but for what you need only this solves

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.