webentwicklung-frage-antwort-db.com.de

So zentrieren Sie Links in HTML

Ich bin wirklich neu in HTML und habe mich gefragt, wie Sie mehrere Links mit HTML zentrieren.

Ich habe es versucht :

  <a href="http//www.google.com"><p style="text-align:center">Search</a>

Aber das Problem ist, wenn ich versuche, andere Links dahinter zu setzen, zum Beispiel:

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

Sie werden einfach in separate Zeilen gesetzt. Ich glaube, das passiert wegen der <p> function ... aber ich kenne nur HTML, ich weiß, dass Sie es in CSS tun können, aber ich habe mich gefragt, ob es nur mit HTML getan werden kann.

Vielen Dank für jede Hilfe!

17
yoshyosh

es gibt einige Fehler in Ihrem Code - der erste: Sie haben Ihr p- -Tag nicht geschlossen:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a>

next: p steht für 'Absatz' und ist ein Blockelement (es verursacht also einen Zeilenumbruch). Was Sie dort verwenden wollten, ist ein span, das nur ein Inline-Element für die Formatierung ist:

<a href="http//www.google.com"><span style="text-align:center">Search</span></a>

wenn Sie Ihrem Link jedoch nur einen Stil hinzufügen möchten, können Sie den Stil für diesen Link direkt festlegen:

<a href="http//www.google.com" style="text-align:center">Search</a>

am ende wäre das zumindest korrektes html, aber immer noch nicht genau das was du willst, weil text-align:center zentriert den Text in diesem Element , sodass Sie diesen für das Element festlegen müssten, das enthält diese links (dieses stück html wird nicht gepostet, also kann ich dich nicht korrigieren, aber ich hoffe du verstehst) - um dies zu zeigen, benutze ich ein einfaches div :

<div style="text-align:center">    
  <a href="http//www.google.com">Search</a>
  <!-- more links here -->
</div>

EDIT: Weitere Ergänzungen zu Ihrer Frage:

  • p ist keine 'Funktion', aber Sie haben Recht, dies verursacht das Problem (weil es ein Block-Element ist)
  • was Sie versuchen zu verwenden, ist CSS - es ist nur inline anstatt in einer separaten Datei abgelegt zu werden, aber Sie machen nicht 'nur HTML' Hier
28
oezi

Da Sie eine Liste mit Links haben, sollten Sie diese als Liste (und nicht als Absätze) markieren.

Listamatic hat eine Reihe von Beispielen, wie Sie Listen von Links formatieren können , einschließlich einer Zahl, die vertikale Listen sind, wobei jeder Link zentriert ist (und genau danach scheinen Sie zu sein). Es hat auch ein Tutorial, das die Prinzipien erklärt .

Dieser Teil des Stylings läuft im Wesentlichen auf "Set text-align: center für ein Element, das als Block angezeigt wird, der den Verknüpfungstext enthält "(das kann der Anker selbst sein (wenn Sie ihn als Block anzeigen lassen) oder das Listenelement, das ihn enthält.

4
Quentin

sie würden sie in einen <p> oder einen <div> einfügen.

<p style="text-align:center">
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a>
</p>

beispiel: http://jsfiddle.net/X8HM4/1/

Das <p> wird in einer neuen Zeile angezeigt. Versuchen Sie, alle Ihre Links in ein einziges <p> -Tag zu packen:

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
2
charliegriefer