I'm using the following code in body section.
<center><a href="contact.html" class="button large hpbottom">Get Started</a></center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
This question is related to
center
In your html file:
<a href="contact.html" class="button large hpbottom">Get Started</a>
In your css file:
.hpbottom{
text-align: center;
}
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
You can use css like below;
<a href="contact.html" style="margin:auto; text-align:center; display:block;" class="button large hpbottom">Get Started</a>
You can put in in a paragraph
<p style="text-align:center;"><a href="contact.html" class="button large hpbottom">Get Started</a></p>
To align a div in the center, you have to do 2 things: - Make the div a fixed width - Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
<a href="Demo2.html">Center</a>
</h4>
</body>
</html>
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can do this:
<div style="text-align: center">
<a href="contact.html" class="button large hpbottom">Get Started</a>
</div>
Source: Stackoverflow.com