Question

我在正文部分使用以下代码。

<center><a href="contact.html" class="button large hpbottom">Get Started</a></center>

<center>代码还有其他选择吗？

如何在不使用<center>标记的情况下使其居中？

Answer 1

将text-align:center;display:block;添加到css类。比在控件本身上设置样式更好。如果你想改变它，你可以在一个地方改变它。

Answer 2

你可以这样做：

<div style="text-align: center">
    <a href="contact.html" class="button large hpbottom">Get Started</a>
</div>

Answer 3

你可以加入段落

<p style="text-align:center;"><a href="contact.html" class="button large hpbottom">Get Started</a></p>

要在中心对齐div，您必须做两件事： - 使div成为固定宽度 - 设置左右边距属性变量

<div class="container">
 <div style="width:100px; margin:0 auto;">
     <span>a centered div</span>
  </div>
</div>

Answer 4

你可以使用下面的css;

 <a href="contact.html" style="margin:auto; text-align:center; display:block;" class="button large hpbottom">Get Started</a>

Answer 5

您可以使用以下代码：

a {
display: block;
width: 113px;
margin: auto; 
}

在我的情况下，设置display:block的链接会更容易定位链接。
当您使用<div>代码/类时，此功能相同您可以选择任何您想要的width。

Answer 6

我不知道为什么，但对我来说 text-align:center; 仅适用于：

text-align: grid;

OR

display: inline-grid;

我检查了，没有一种样式可以覆盖。

我的结构：

<ul>
    <li>
        <a>ElementToCenter</a>
    </li>
</ul>

Answer 7

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
    </head>
    <body>
        <h4 align="center"> 
              <a href="Demo2.html">Center</a>  
        </h4>
    </body>
    
</html>

Answer 8

还有一个方便的标签......无论你在中间放什么，都会居中。像这样：

<center>
<a href..... whatever>
</center>

Answer 9

在你的html文件中：

<a href="contact.html" class="button large hpbottom">Get Started</a>

在你的css文件中：

.hpbottom{
    text-align: center;
}

如何制作<div>或<a href="#"> to align center</a> </div>

9 个答案: