CSS applied is not working for link component in HTML

Question

I'm new and currently learning ASP.NET, I'm building the main page of my website, but based on the image attached, I don't understand why the "Order Now" button is not align in the center even though I have already set it text-align to center in css. Also the "bounceInUp" animation imported from Animate.css is not working for the button as well, but it works perfectly for the description under the WELCOME.

Answer 1

You should insert <a>Order Now!</a> into <button></button> and CSS this button with this code

button {
    margin: auto;
    display: block;
}

Answer 2

To center the button:

.content a {
  position: absolute;
  margin: 10px;
  left: 45vw;
  text-align: center;
  font-family: "Open Sans";
  font-size: 25px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  border: solid #fff;
  border-radius: 9px;
  padding: 10px 20px;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-delay: 1s;

}

For the bounce In Up animation, I don't see an import anywhere in your code.

Answer 3

To center an element inside another you have to use margin:auto; as a proprety of your button.

The element that will hold the button will have the text-align:center; proprety

The browser need to know the position even if you dont specify it. So all your parents elements must be positioned in order to center something somewhere in your page.

It is also a very good practice to use borders on your elements when you position them so you can see the actual size and position.

.content { text-align:center;}
.content a { text-align:center; }

the position of .content remain absolute. You align the text inside the .content a. This element is text by itself and not a container like a div and thats what I would probably suggest you do.

in your case this will center anything in the .content

.content { text-align:center;}

I suggest something like

 .content { background-color:#000000; position:absolute; width:100%; text-align:center; } .content div { border:1px solid #ffffff; color:#ffffff; margin:auto; width:300px; } 

 <div class="content"> <div>Button</div> </div> 

Answer 4

You Can Try Ii just tell content any children 'text-align: center;' That Work Fine..!

  $(function () { setTimeout(function () { $('.fly-in-text').removeClass('hidden'); }, 500); })(); 

 * { margin: 0; padding: 0; } body { font-family: Calibri, sans-serif; } .background-wrap { position: fixed; z-index: -1000; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } #video-bg-elem { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } .content { position: absolute; width: 100%; min-height: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); text-align: center; } .content p { text-align: center; font-size: 20px; letter-spacing: 3px; color: #aaa; padding-top: 26%; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 1s; } .content a { text-align: center; font-family: "Open Sans"; font-size: 25px; color: #fff; text-transform: uppercase; text-decoration: none; border: solid #fff; border-radius: 9px; padding: 10px 20px; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 1s; } .fly-in-text { list-style: none; position: absolute; left: 50%; top: 40%; transform: translateX(-50%) translateY(-50%); } .fly-in-text li { display: inline-block; margin-right: 50px; font-family: "Open Sans"; font-weight: 300; font-size: 4em; color: #fff; opacity: 1; transition: all 2.5s ease; } .fly-in-text li:last-child { margin-right: 0; } .fly-in-text li.hidden li { opacity: 0; } .fly-in-text.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); } .fly-in-text.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px); } .fly-in-text.hidden li:nth-child(3) { transform: translateX(-150px) translateY(-80px); } .fly-in-text.hidden li:nth-child(4) { transform: translateX(10px) translateY(-200px); } .fly-in-text.hidden li:nth-child(5) { transform: translateX(-300px) translateY(200px); } .fly-in-text.hidden li:nth-child(6) { transform: translateX(20px) translateY(-20px); } .fly-in-text.hidden li:nth-child(7) { transform: translateX(30px) translateY(200px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="background-wrap"> <video id="video-bg-elem" preload="auto" autoplay="autoplay" loop="loop" muted="muted"> <source src="video/bg.mp4" type="video/mp4" /> Video not supported </video> </div> <div class="content"> <ul class="fly-in-text hidden"> <li>W</li> <li>E</li> <li>L</li> <li>C</li> <li>O</li> <li>M</li> <li>E</li> </ul> <p class="animated bounceInUp">Cafeteria Self-Ordering System allowing customers to order their own food.</p> <a href="home.aspx" class="animated bounceInUp">Order Now!</a> </div>