私のリンクが私のイメージの中心にないのはなぜですか？

誰かが自分のリンクが自分の画像の中央に表示されない理由を教えていただけますか？センタータグは自分のイメージでは機能しましたが、リンクでは何の手がかりがなかったのですか？これは私を少し台無しにしています。私のリンクが私のイメージの中心にないのはなぜですか？

<!DOCTYPE html> 
<html> 



<head> 


     <title>PEllisFitness</title> 

     <link href="feel.css" rel="stylesheet" type="text/css" /> 

    </head> 



<body background="wayback.jpg"> 
     <header> 
     <center><img src="Fitness Logo.jpg" alt="Fitness Logo" align="middle" style="border:5px solid black"/></center> 

     </header> 

     <center> 
     <nav> 
     <ul> 
      <li><a href="Home.html">Home</a></li> 
      <li><a href="Diet.html">Diet Plans</a></li> 
      <li><a href="Mass.html">Mass Guide</a></li> 
      <li><a href="Cutting.html">Cuttin Guide</a></li> 
      <li><a href="About.html">About Me</a></li> 
      <li><a href="Contact.html">Contact Info</a></li> 
     </ul> 
     </nav> 

     </center> 

    </body> 

</html>

出典

2016-10-09 phillip swag

を見ることができます願っていますかそれは大いに[非推奨]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center）です。特定のチュートリアルや学習教材でこれを始めるのですか？ –

いいえ、私の最後のahaで実際に仕事をしています –

あなたはこのためCSSを使用する必要があります。
<center>タグは推奨されていません。
現時点では、問題を引き起こす可能性のあるリストアイテムではなく、リスト全体をセンタリングしています。だからあなたのリンクを中心にしたい場合は、<li>をすべて<center>の中にラップする必要があります。お役に立てれば。

より良い解決策は、CSSを<ul>に追加することです。リストの列に表示され、中央に子要素を持つCSS-Flexboxを行います

<ul style="display: flex; flex-direction: column; align-items: center;">

これに変更します。

出典

2016-10-09 04:11:57 Syntac

私はcssでこれを行い、それは仕事の仕事をしませんでした{ \t \t text-align：center; } –

@phillipswag text-alignは、1つの要素の中のテキスト、または 'inline'、' inline-block'または別のテキストのような表示タイプとして表示される要素のみを整列させます。したがって、ここでは機能しません。 – Syntac

リストの代わりにテーブルを使用しようとしましたか？リンクをテーブルに配置し、テーブルを中央に置き、テキストをテーブルの中央に配置することができます。

出典

2016-10-09 04:26:20

テーブルを使用してフォーマットを行うのは十分ですが、実際には避けるべきです。テーブルを使用してデータを表示する必要があります。 – Syntac

センターアライメントのためのあなたのULタグのスタイル以下の利用

<ul class="centerNavList">

と

<style> 
.centerNavList { 
    margin: auto; 
    width: 50%; 
    padding: 12px; 
} 
</style>

出典

2016-10-09 04:33:23

時々カスタムをproperly.But動作しないので、あなただけのセンタータグを使用する必要はありませんcss never beatray;）どこでアイデアが ``

タグを使用するようになりましたか？...それは

ul{ 
position:relative; 
display: inline-block; 
list-style: none; 
width:100%; 
text-align: center; 
margin: auto; 
padding: 0; 
}

はフィドル center Fiddle

出典

2016-10-09 04:37:45

私のリンクが私のイメージの中心にないのはなぜですか？

答えて

関連する問題