CODEWITHSUNDEEP
csshtml
Peter Festejo
Peter Festejo

Reputation: 97

How to align link to center?

I've been trying to figure out on how to align link to center. This is what I've got on my code.

    <div class="cont">
  <div class="form sign-in">
    <h2>Welcome back,</h2>
    <label>
      <span>Email</span>
      <input type="email" />
    </label>
    <label>
      <span>Password</span>
      <input type="password" />
    </label>
    <a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
    <button type="button" class="submit">Sign In</button>
    <button type="button" class="fb-btn">Connect with <span>facebook</span></button>
  </div>

And this is my css code for the class "forgot-pass"

.forgot-pass {
   margin-top: 15px;
   text-align: center;
   font-size: 12px;
   color: #cfcfcf;
}
    .cont {
  overflow: hidden;
  position: relative;
  width: 1200px;
  height: 550px;
  margin: 0 auto 100px;
  background: #fff;
}
.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
  padding: 50px 30px 0;
 }

I've tried this code

<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

the css class .forgot-pass had been applied but the text-align:center is the only one that have not been applied.

Is there something that I did wrong? Or another that I could get that in center?

Upvotes: 1

Views: 18897

Answers (4)

Johannes
Johannes

Reputation: 67798

Put the link inside the p tag. No span needed with your CSS:

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.forgot-pass a:link,
.forgot-pass a:visited {
  color: #cfcfcf;
}

.forgot-pass a:hover,
.forgot-pass a:active {
  color: gold;
}
<p class="forgot-pass"><a href="facebook.com">Forgot password?</a></p>

Upvotes: 3

ConsoleLog
ConsoleLog

Reputation: 511

    .forgot-pass {
       margin-top: 15px;
       text-align: center;
       font-size: 12px;
       color: #cfcfcf;
      display: block;
    }

<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

Add display block to the span

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
  display: block;
}
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

Upvotes: 1

Brett Wolfington
Brett Wolfington

Reputation: 6627

In your second example, the problem is caused by both elements being inline elements. Inline elements will only take up as much horizontal space as required by the contents. As a result, setting text-align: center; will not produce a visible effect, as the text will only be centered in the element, which is the same size as the text itself. To center the text in the page, you can either set the position of the element manually (e.g. position: absolute), or make it a block element.

The following code will center the link on the page:

.forgot-pass {
   margin-top: 15px;
   text-align: center;
   font-size: 12px;
   color: #cfcfcf;
   display: block;
}

<a href="facebook.com" class="forgot-pass">Forgot password?</a>

Upvotes: 1

HaSnen Tai
HaSnen Tai

Reputation: 1391

You can do something like this

<body>
    <p class="forgot-pass">
        <a href="facebook.com">Forgot password?</a>
    </p>
</body>

.forgot-pass {
            margin-top: 15px;
            text-align: center;
            font-size: 12px;
            color: #cfcfcf;
        }

Upvotes: 0

Related Questions