Zentrieren von zwei Links in meiner Fußzeile

Question

Ich habe eine Frage zu CSS (vielleicht einige HTML, wenn das erforderlich ist).

Ich mache einen .footer, aber meine zwei Links – 'Host' und 'Controlpanel' – wird nicht zentriert.

Würde etwas Hilfe nicht stören! 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>

Hinweis: Ich bin sehr neu auf Codierung, so könnte es einige ineffizient Fehler sein. Mein gewünschte End-Ergebnis:

Answer 1

Ich habe Ihren HTML-Code ein wenig geändert, aber Sie werden auf die Idee kommen.

<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; 
} 

Hoffnung, das hilft. Here is the fiddle.

Answer 2

den Inhalt der Fußzeile beilegen im

div style = "float: center"

dann jeweils ihre unterschiedlichen Gleitkommazahlattribut geben verlinken abgesehen von der Control Panel und Host (sie erben Float: Center von der div block)

<div class="footer"> 
     <div style ="float: centre ;" > 
     <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> 
       <!- 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="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> 
    </a> 
      </div> 
     <!- end of freefind search box html -> 
    </div> 
</body> 
</html> 

Ich denke, das sollte das Problem lösen.

Answer 3

Fügen Sie alle Ihre Anker innerhalb footer in .footer-container hinzu und wickeln Sie die zwei Anker, die Sie möchten, zentriert in .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> 

Füge diese KLASSEN

.footer-container { 
    position: relative; 
} 

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

SNIPPET

.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>