Text-align не работает одинаково на двух одинаковых div?

Question

Я сделал исследование перед публикацией, но я не могу найти ничего, чтобы решить проблему.

Я создаю меню на своем веб-сайте, оно имеет ширину 100% и внутри меню, я ставлю 3 разных div.

Успели сделать их взять 100% ширины

.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 не думаю, что это вызывает мой вопрос. Проблема в том, что внутри .left и .right, text-align не работает, но это делает для .center div. В начале мои три div были в поплавке слева, но, поскольку я был жестким, это была проблема, я пробовал позиционирование с абсолютными позициями, но стиль не работает.

Я применяю цвет фона, чтобы визуализировать ширину моего div, и текст не является центром вообще, очевидно, что «text-align: right» тоже не работает, и я не понимаю, потому что .center и. left/.right в основном то же самое, я не могу понять, в чем разница между .center и другим div.

Что не так в моем коде?

Answer 1

Из следующих стилей

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

Там нет места, внутри которого для вас, чтобы увидеть text-align оказывает никакого влияния на текст, который вы ссылаетесь. Это связано с тем, что когда вы float те li, они уменьшают только пространство, необходимое для их содержимого.

это так, то, скорее всего, из-за padding и margin в вашем ul, что вы чувствуете, что text-align ответ. Смотрите следующий код

.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, но, надеюсь, этого достаточно, чтобы сделать первый шаг, чтобы привести вас туда, куда вы надеялись.