두 개의 동일한 div에서 텍스트 정렬이 같은 방식으로 작동하지 않습니까?

Question

게시하기 전에 조사를했는데 문제를 해결할 수있는 방법이 없습니다.

내 웹 사이트에 메뉴를 만들고 있는데, 너비가 100 %이고 메뉴 안에 메뉴가 3 개 있습니다.

그들을

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

내 메뉴는 SVG 배경을 가지고 있지만 나는 내 문제를 일으키는 생각하지 않는다

폭의 100 %를 취할 수 있도록 관리. 문제는 .left 및 .right 내부에서 텍스트 정렬이 작동하지 않지만 .center div에서 사용된다는 것입니다. 처음에는 세 개의 div가 왼쪽 플로트에 있었지만 문제가 될 때까지 나는 포지셔닝을 시도했지만 절대 위치는 있지만 스타일은 작동하지 않았습니다.

내 div의 너비를 시각화하기 위해 배경색을 적용하고 텍스트가 전혀 가운데가 아니며 분명히 "텍스트 정렬 : 오른쪽"도 작동하지 않으며 .center 및. 왼쪽/.right는 기본적으로 동일합니다. 나는 .center와 다른 div의 차이점을 이해할 수 없습니다.

내 코드에 무슨 문제가 있습니까? 때문에 다음 스타일

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

의

Answer 1

는 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가 여기에있는 힘을 발휘할 수 있도록 노력하겠습니다. 그러나 희망 사항은 얻을 수있는 방향으로 이끌 수있는 첫 번째 단계로 충분합니다.