web-dev-qa-db-ja.com

リンクをHTMLの中央に配置する方法

私は本当にHTMLが初めてで、複数のリンクをhtmlでどのようにセンタリングするのか疑問に思っていましたか？

努力しています ：

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

しかし、問題は、たとえば他のリンクをその背後に配置しようとしたときです。

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

それらを別々の行に配置するだけです。これは、<p> function ...しかし、私はHTMLのみを知っています。CSSでそれができることは知っていますが、HTMLだけを使ってそれができるのか疑問に思っていました。

助けてくれてありがとう！

htmlcentercentering
17
yoshyosh

コードにいくつかの間違いがあります-最初：p- tagを閉じていません：

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

次：pは 'paragraph'を表し、ブロック要素です（したがって、改行が発生します）。使用したいのはspanで、これはフォーマット用の単なるインライン要素です。

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

ただし、リンクにスタイルを追加するだけの場合は、そのリンクのスタイルを直接設定しないでください。

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

結局、これは少なくとも正しいhtmlですが、それでもまだあなたが望むものではありません。なぜならtext-align:centerは、その要素のテキストを中央揃えにします。そのため、が含まれる要素にそれを設定する必要がありますこのリンク（このHTMLは投稿されていないため、修正できませんが、理解していただければ幸いです）-これを示すために、単純なdivを使用します：

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

編集：質問への追加：

  • pは「関数」ではありませんが、その通りです。これが問題の原因です（ブロック要素であるため）
  • 使用しようとしているものはcss-別のファイルに配置されるのではなく、単にインラインですが、「単なるHTML」ではありませんここに
28
oezi

リンクのリストがあるため、リンクとして（段落としてではなく）マークアップする必要があります。

Listamaticには リンクのリストのスタイルを設定する方法の例 があります。これには、各リンクが中央に配置された垂直リストの数が含まれます（これは後のように見えます）。 原理を説明するチュートリアル もあります。

スタイリングのその部分は、基本的に「Set text-align: centerリンクテキストを含むブロックとして表示されている要素」（ブロック自体として表示する場合はアンカー自体の場合もあります）またはそれを含むリストアイテム。

4
Quentin

<p>または<div>内に配置します

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

サンプル： http://jsfiddle.net/X8HM4/1/

2
太極者無極而生

<p>は新しい行に表示されます。すべてのリンクを1つの<p>タグでラップしてみてください。

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