在HTML (wordpress)中居中超链接



我相信我今天花了很多时间试图将这些超链接对齐到我的页面中心,但没有运气。请帮助我,因为注意工作,这些是左对齐的原因,我不明白:

/* Custom links*/
.cmenu a { 
padding: 5px;
margin: 5px;
font-size: 14px; 
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align:center;
}
.cmenu a:link { 
color: #0000Ea;
} 
.cmenu a:hover { 
color: #2e8acc; 
}
在HTML中,我有:
<p class="cmenu">
<a href="../home">Home </a>
<a href="../about">About Us</a>
<a href="../forums">Forums</a>
<a href="../contact">Contact</a>
</p> 

请注意,我试过没有:

margin-left: auto;
margin-right: auto;

但它没有工作。谢谢你的帮助。

当我使用inspect元素时,我可以看到:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    font-size: 100%;
    vertical-align: baseline;
}

如果我将代码text-align:center;添加到上面的代码(最后一个)。我把它们放在中间。但是我不能。我该怎么办?

text-align:center;将始终应用于该样式应用于

的容器的子容器
p.cmenu {
  text-align: center;
}

就是你要找的

将text-align应用于父元素:

p.cmenu { * only paragraphs with this class */
  text-align: center;
}

.cmenu { /* any element with this class */
  text-align: center;
}

p.cmenu {
  text-align: center;
}
.cmenu a {
  padding: 5px;
  margin: 5px;
  font-size: 14px;
}
.cmenu a:link {
  color: #0000Ea;
}
.cmenu a:hover {
  color: #2e8acc;
}
<p class="cmenu">
  <a href="../home">Home </a>
  <a href="../about">About Us</a>
  <a href="../forums">Forums</a>
  <a href="../contact">Contact</a>
</p>

margin auto never居中。这只适用于块元素。在你的例子中,你需要对你的链接的父元素应用text-align:center

最新更新