Pomocy....
Próbuję stworzyć spójną strukturę dla witryny, gdzie przedstawiałaby się tak, jak na jpgu.
Zależy mi na poprawnym wyświetleniu jej zarówno pod IE 8/9/10 jak i przykładowo Operą.
Strukturę już mam gotową i działa. Mam za to problem z ustawieniem poprawnym wyśrodkowania tekstu.
Czy może mi ktoś pomóc w poprawnym ustawieniu tekstu?
Li mają różne długości i nie mogę ich ustawić do równego wymiaru.
Tekst w li musi być wyśrodkowany zarówno w pionie, jak i w poziomie.
.page_navigation ul ‹;;
clear: both;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: relative;
width: 861px;
›;;
.page_navigation li ‹;;
display: inline-table;
height: 40px;
position: relative;
vertical-align: middle;
›;;
.page_navigation li a ‹;;
color: #444444;
font-family: "Segoe UI";
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: normal;
margin-left: 35%;
margin-top: 10px;
position: absolute;
I kod html
<nav class="page_navigation">
<ul style="width: 963px;">
<li><a href="1.html">1111111111111aaa.html</a></li>
<li><a href="2.html">11122222111111aaa.html</a></li>
<li><a href="3.html">133333311111111aaa.html</a></li>
<li><a href="4.html">441aaa.html</a></li>
</ul>
</nav>
Wyśrodkowanie tekstu w li w pionie i poziomie:
text-align:center;
line-height: 40px; ( tutaj zadziała pod warunkiem, że tekst zmieści się w jednej linii )
dla .page_navigation li a dodaj jeszcze dodatkowo display: block; position: absolute nie jest potrzebne. Display: block dodaje się dlatego, aby link był klikalny na całej powierzchni przycisku.
Żeby wyśrodkować listę, musisz objąć ją w dwa elementy outer-wrapper oraz .inner-wrapper. Tutaj zobacz przykład:
http://codepen.io/anon/pen/fCyns
Jest to sposób na wyśrodkowanie elementu, którego długość nie jest znana.
