• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

text-align: center; nie centruje mi tekstu

VPS Starter Arubacloud
+1 głos
376 wizyt
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

+2 głosów
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 (288,330 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.

+1 głos
odpowiedź 23 marca 2021 przez VBService Ekspert (255,320 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 <br><br><br> ... <br>

<br>: The Line Break element

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

 

Moja propozycja  smiley

<!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;
}

 

0 głosów
odpowiedź 22 marca 2021 przez SzkolnyAdmin Szeryf (87,220 p.)
Działa. Brak ci cudzysłowów w linii 2 i 8 pliku HTML.
komentarz 22 marca 2021 przez SzkolnyAdmin Szeryf (87,220 p.)
A, dałeś center w kodzie. Masz kaszanę w pliku CSS.
komentarz 22 marca 2021 przez Fishu Nowicjusz (150 p.)
przeniesione 23 marca 2021 przez Arkadiusz Waluk
Już sobie poradziłem, nie usunąłem float: left; tam gdzie trzeba. Temat do zamknięcia, dzięki za pomoc. :D

Podobne pytania

0 głosów
1 odpowiedź 160 wizyt
pytanie zadane 22 maja 2019 w HTML i CSS przez iframeeh Użytkownik (680 p.)
+1 głos
2 odpowiedzi 562 wizyt
pytanie zadane 4 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
1 odpowiedź 497 wizyt

92,782 zapytań

141,712 odpowiedzi

320,602 komentarzy

62,114 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...