• 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

Aruba Cloud - Virtual Private Server VPS
+1 głos
596 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 (290,050 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 (256,600 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 (89,570 p.)
Działa. Brak ci cudzysłowów w linii 2 i 8 pliku HTML.
komentarz 22 marca 2021 przez SzkolnyAdmin Szeryf (89,570 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ź 183 wizyt
pytanie zadane 22 maja 2019 w HTML i CSS przez iframeeh Użytkownik (680 p.)
+1 głos
2 odpowiedzi 769 wizyt
pytanie zadane 4 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
1 odpowiedź 544 wizyt

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...