テキストアライメントは同じ2つのdivで同じように機能しませんか？

Question

投稿する前に調査をしましたが、問題を解決するための方法が見つかりません。

私は自分のウェブサイトにメニューを作っています。幅は100％で、メニューの内側には3つの異なるdivがあります。

は、彼らが私のメニューは、SVGの背景を持っていますが、私はそれが私の問題を引き起こしているとは思わない

.clear { 
 
    clear: both; 
 
} 
 
.menu { 
 
    position: relative; 
 
    height: 20%; 
 
    text-align: center; 
 
} 
 
.menu:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url("images/triangles.svg"); 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.1; 
 
    z-index: -1; 
 
} 
 
.menu li { 
 
    float: left; 
 
    list-style: none; 
 
    margin-right: 5%; 
 
} 
 
.left, 
 
.center, 
 
.right { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    background-color: blue; 
 
} 
 
.left, 
 
.right { 
 
    width: 30%; 
 
} 
 
.left { 
 
    left: 5%; 
 
    margin-right: 5%; 
 
} 
 
.right { 
 
    right: 5%; 
 
} 
 
.center { 
 
    width: 20%; 
 
    left: 40%; 
 
}

<div class="menu"> 
 
    <!--START--> 
 
    <div class="left"> 
 
    <ul> 
 
     <li><a href="#01">Element 1</a> 
 
     </li> 
 
     <li><a href="#02">Element 2</a> 
 
     </li> 
 
     <li><a href="#03">Element 3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="center"> 
 
    <h1>Title</h1> 
 
    <h3>Another Title</h3> 
 
    </div> 
 

 
    <div class="right"> 
 
    <ul> 
 
     <li><a href="#04">Element 4</a> 
 
     </li> 
 
     <li><a href="#05">Element 5</a> 
 
     </li> 
 
     <li><a href="#06">Element 6</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="clear"></div> 
 
</div> 
 
<!--END-->

幅の100％を取る作ることができました。問題は、.leftと.rightの内部では、text-alignは機能しませんが、.center divでは機能します。 私の3つのdivは浮動小数点で残っていましたが、私はそれが問題だったので、ポジショニングを試みましたが絶対的なポジションですが、スタイルは機能しませんでした。

私はdivの幅を視覚化するために背景色を適用し、テキストはまったく中央ではありません。明らかに "text-align：right"もうまく動作せず、私は.centerと。 left/.rightは基本的に同じですが、私はcentreと他のdivの違いを知ることはできません。

私のコードで何が間違っていますか？

Answer 1

次のスタイル

.menu li{float: left; list-style: none; margin-right: 5%;} 

のあなたはtext-alignは、あなたが参照しているテキスト上の任意の効果を持っている見ることのために、その中にスペースはありませんので。これは、floatの場合は、liのコンテンツに必要な領域だけにスリムになるからです。そうであること、それが原因であなたがtext-alignが答えであることを感じて、あなたのulでpaddingとmarginの最も可能性が高いことを

。次のコード

.right ul {margin: 0;padding:0;} 

そして、それが持っている効果を参照してください：

.clear { 
 
    clear: both; 
 
} 
 
.menu { 
 
    position: relative; 
 
    height: 20%; 
 
    text-align: center; 
 
} 
 
.menu:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url("images/triangles.svg"); 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.1; 
 
    z-index: -1; 
 
} 
 
.menu li { 
 
    float: left; 
 
    list-style: none; 
 
    margin-right: 5%; 
 
} 
 
.left, 
 
.center, 
 
.right { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    background-color: blue; 
 
} 
 
.left, 
 
.right { 
 
    width: 30%; 
 
    text-align: left; 
 
} 
 
.left { 
 
    left: 5%; 
 
    margin-right: 5%; 
 
} 
 
.right { 
 
    right: 5%; 
 
} 
 
.center { 
 
    width: 20%; 
 
    left: 40%; 
 
} 
 
a { 
 
    color: white; 
 
} 
 
.right ul { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="menu"> 
 
    <!--START--> 
 
    <div class="left"> 
 
    <ul> 
 
     <li><a href="#01">Element 1</a> 
 
     </li> 
 
     <li><a href="#02">Element 2</a> 
 
     </li> 
 
     <li><a href="#03">Element 3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="center"> 
 
    <h1>Title</h1> 
 
    <h3>Another Title</h3> 
 
    </div> 
 

 
    <div class="right"> 
 
    <ul> 
 
     <li><a href="#04">Element 4</a> 
 
     </li> 
 
     <li><a href="#05">Element 5</a> 
 
     </li> 
 
     <li><a href="#06">Element 6</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="clear"></div> 
 
</div> 
 
<!--END-->

をあなたが達成しようとしている正確なものをレイアウトに応じて、多くのオプションがどのようにありますCSSがここであなたに与えてくれる力を身につけることができますが、うまくいけば、これはあなたが得ることを望んでいたところに導く最初のステップで十分です。