text-align: center; nie centruje mi tekstu

pytanie zadane 22 marca 2021 w HTML i CSS przez Fishu Nowicjusz (150 p.)

Witam, nie działa mi centrowanie tekstu w blokach, ciężko mi powiedzieć dlaczego tak jest.

HTML:

<!DOCTYPE html>
<html lang=pl>
    <head>
        <meta charset="UTF-8">
        <meta author="Fishu">
        
        <title>Frampole Industrials</title>
        <link rel=stylesheet href="styl.css">
    </head>
    <body>
        <center><img src="images/logo.png" class="logo"></center>
        <br><br><br><br><br><br><br><br><br><br>
        <center><div class="main">
            <ol>
                <li><a href="">MENU</a></li>
                <li><a href="">O FIRMIE</a></li>
                <li><a href="">PRODUKTY</a></li>
            </ol>
            <footer class="stopka"><p>Twórca strony: Fishu</p></footer>
        </div></center>
    </body>
</html>

CSS:

body
{
    background-image: url(images/tlo.png);
    background-size: cover;
    background-attachment: fixed;
}

.logo
{
    width:30%;
    height:auto;
    background-color: #f5f5f0;
    border: red solid 9px;
    border-radius: 50%;
}

.main
{
    width: 900px;
    height: 100px;
    background-color: black;
    border: 5px solid black;
}

ol
{
    list-style: none;
    background-color: #999999;
    height: 25px;
    width: 900px;
    float: left;
    display: inline-block;
    text-align: center;
    padding: 0;
    margin: 0;
}

ol a
{
    display: block;
    float: left;
    text-decoration: none;
    color: black;
}

ol > li
{
    float: left;
    width: 300px;
    height: 50px;
}

ol > li:hover
{
    background-color: #666666;
}

.stopka
{
    background-color: black;
    width: 900px;
    height: 50px;
    float: left;
    color: gray;
}

3 odpowiedzi

odpowiedź 22 marca 2021 przez lukasz21 Obywatel (1,090 p.)

Z tego miejsca usun:

float: left;

ol a
{
    display: block; 
    text-decoration: none;
    color: black; 
}

I taka uwaga: jesli używasz 'display: inline-block' to nie musisz dawać 'float: left'.

Dlaczego ol ma 'height: 25px; ' , a li ma 'height: 50px;' ? Jeśli to nie jest celowy zabieg to powinny mieć taki sam height. Inaczej przy hover powieksza sie 'li'.

komentarz 22 marca 2021 przez Fishu Nowicjusz (150 p.)
przeniesione 23 marca 2021 przez Arkadiusz Waluk

Ok, popróbuję i dam znać czy zadziała

Dzięki

komentarz 22 marca 2021 przez Fishu Nowicjusz (150 p.)
przeniesione 23 marca 2021 przez Arkadiusz Waluk

Usunąłem float: left; i dodałem nawiacy w html i dalej nie działa, a jak usuwam <center> w html to mi się psuje układ strony

komentarz 23 marca 2021 przez Arkadiusz Waluk Ekspert (287,950 p.)

@Fishu, gdy odpowiadasz na jakąś odpowiedź używaj opcji "skomentuj" pod daną. Dzięki temu rozmowa na temat danej odpowiedzi układa się pod nią i wszyscy wiedzą o co chodzi. Jako nową odpowiedź należy dodawać faktycznie nową odpowiedź na dane pytanie - próbę jego rozwiązania.

odpowiedź 23 marca 2021 przez VBService Ekspert (253,340 p.)
edycja 23 marca 2021 przez VBService

Nie powinieneś już używać <center>, ponieważ

<center>: The Centered Text element

zamiast, możemy użyć np.:

text-align: center
margin: 0 auto (0 dla gór-dół, auto dla lewy-prawy)
display: flex; justify-content: center;
display: flex; justify-content: center; align-items: center;
(ostatni z display: flex - ustawia wertykalnie)
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

To samo się tyczy linii  ... 

: The Line Break element

[ Equivalent to <center> tag in CSS? [duplicate] ]

Moja propozycja

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta author="Fishu">

    <title>Frampole Industrials</title>
    <link rel="stylesheet" href="styl.css">
  </head>
  <body>
    <img src="images/logo.png" class="logo">    
    <div class="main">
      <ol>
        <li><a href="">MENU</a></li>
        <li><a href="">O FIRMIE</a></li>
        <li><a href="">PRODUKTY</a></li>
      </ol>
    </div>
    <footer class="stopka"><p>Twórca strony: Fishu</p></footer>
  </body>
</html>

* 
{
    box-sizing: border-box;
}

body
{
    background-image: url(images/tlo.png);
    background-size: cover;
    background-attachment: fixed;
}
 
.logo
{
    display: block;  
    width: 30%;
    margin: 0 auto 200px auto;
    background-color: #f5f5f0;
    border: red solid 9px;
    border-radius: 50%;
}
 
.main
{
    width: 900px;
    height: 100px;
    background-color: black;
    border: 5px solid black;
    display: flex;
    justify-content: center;
}
 
ol
{
    list-style: none;
    background-color: #999999;
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
}
 
ol a
{
    display: block;
    text-decoration: none;
    color: black;
}
 
ol > li
{
    width: 33%;
    height: 50px;
    text-align: center;
    display: inline-block;
}
 
ol > li:hover
{
    background-color: #666666;
}
 
.stopka
{
    background-color: black;
    width: 900px;
    height: 50px;
    float: left;
    color: gray;
}