Question

我有一个关于CSS的问题（如果需要，可能还有一些HTML）。

我正在制作一个.footer，但是我的两个链接 - “主持人”和“控制面板” - 不会居中。

不介意一些帮助！ https://codepen.io/anon/pen/WjVZzW

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #f75418;
  text-align: center;
  border-top-style: dashed;
  border-width: 2px;
  display: inline-block;
}

.footer a:link {
  color: white;
  text-decoration: none;
}

.footer a:visited {
  color: white;
  text-decoration: none;
}

.footer a:hover,
a:active {
  color: white;
  text-decoration: underline;
}

<div class="footer">
  <div>
    <a style="float: left;" href="http://www.example.com">site map</a>
    <a href="http://www.example.com" title="Controlpanel">Controlpanel</a>
    <a target="_blank" href="http://www.example.com" title="Host website">Host</a>
  </div>
  <!- start of freefind search box html ->
  <a style="float:right;position:absolute;right:20px;top:15px;">
    <form action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
      <input type="hidden" name="si" value="000">
      <input type="hidden" name="pid" value="r">
      <input type="hidden" name="n" value="0">
      <input type="hidden" name="_charset_" value="">
      <input type="hidden" name="bcd" value="&#000;">
      <input type="text" name="query" size="15">
      <input type="submit" value="search">
    </form>
  </a>
  <!- end of freefind search box html ->
</div>

注意：我对编码很新，所以可能存在一些低效的错误。我期望的最终结果：

Answer 1

将footer内的所有锚点添加到.footer-container中，并将您想要居中的两个锚点包裹在.center div中。

<div class="footer-container"> <!--Wrap all a inside container and position relative -->
    <a style="float: left;" href="http://www.example.com">site map</a>

    <div class="center"> <!--Wrap a you want centered -->
      <a href="http://www.example.com" title="Controlpanel">Controlpanel</a>
      <a target="_blank" href="http://www.example.com" title="Host website">Host</a>
    </div>

    <!- start of freefind search box html ->
    <a style="float:right;position:absolute;right:20px;top:15px;">
      <form action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
        <input type="hidden" name="si" value="000">
        <input type="hidden" name="pid" value="r">
        <input type="hidden" name="n" value="0">
        <input type="hidden" name="_charset_" value="">
        <input type="hidden" name="bcd" value="&#000;">
        <input type="text" name="query" size="15">
        <input type="submit" value="search">
      </form>
    </a>
    <!- end of freefind search box html ->
  </div>

添加此课程

.footer-container {
    position: relative;
 }

.center {
   position: absolute;
   left: 0;
   right:0;
}

<强>段

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #f75418;
  text-align: center;
  border-top-style: dashed;
  border-width: 2px;
  display: inline-block;
}

.footer a:link {
  color: white;
  text-decoration: none;
}

.footer a:visited {
  color: white;
  text-decoration: none;
}

.footer a:hover,
a:active {
  color: white;
  text-decoration: underline;
}

.footer-container {
  position: relative;
}

.center {
  position: absolute;
  left: 0;
  right:0;
}

<div class="footer">
  <div class="footer-container">
    <a style="float: left;" href="http://www.example.com">site map</a>
    <div class="center">
      <a href="http://www.example.com" title="Controlpanel">Controlpanel</a>
      <a target="_blank" href="http://www.example.com" title="Host website">Host</a>
    </div>
  </div>
    <!- start of freefind search box html ->
    <a style="float:right;position:absolute;right:20px;top:15px;">
      <form action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
        <input type="hidden" name="si" value="000">
        <input type="hidden" name="pid" value="r">
        <input type="hidden" name="n" value="0">
        <input type="hidden" name="_charset_" value="">
        <input type="hidden" name="bcd" value="&#000;">
        <input type="text" name="query" size="15">
        <input type="submit" value="search">
      </form>
    </a>
    <!- end of freefind search box html ->
</div>

Answer 2

我稍微改变了你的HTML，但你会明白这一点。

<div class="footer">
  <div class="left">1</div>
  <div class="links-wrapper">
    <div class="links">
      <a href="#">Link one</a>
      <a href="#">Link one</a>
    </div>
  </div>
  <div class="right">
    <form  action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
      <input type="hidden" name="si" value="80753354">
      <input type="hidden" name="pid" value="r">
      <input type="hidden" name="n" value="0">
      <input type="hidden" name="_charset_" value="">
      <input type="hidden" name="bcd" value="&#247;">
      <input type="text" name="query" size="15">
      <input type="submit" value="search">
    </form>
  </div>
</div>

Css：

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #f75418;
  text-align: center;
  border-top-style: dashed;
  border-width: 2px;
  display: inline-block;
} 

.left{
  background-color: yellow;
  text-align: left;
  float: left;
  width: 30%;
}

.middle{
  background-color: blue;
  float: left;
  width: 40%;
  text-align: center;
}

.right{
  background-color: red;
  text-align: right;
  width: 30%;
  float: left;
}



.footer a:link {
  color: white;
  text-decoration: none;
}

.footer a:visited {
  color: white;
  text-decoration: none;
}

.footer a:hover, a:active {
  color: white;
  text-decoration: underline;
}

希望这会有所帮助。 Here is the fiddle

在我的页脚中居中两个链接

2 个答案: