Jak wyśrodkować text nie tracąc stylu

pytanie zadane 13 maja 2019 w HTML i CSS przez manager96 Bywalec (2,050 p.)
zamknięte 13 maja 2019 przez manager96

Hej, zdarzyło się wam żeby komenda text-allign nie działała ?? w pliku style.css nie robi ona w ogóle żadnej różnicy a zależy mi na wyśrodkowaniu napisu "STATYSTYKA". Gdy wpisuję ją w spana to owszem zadziała, jednak tracę styl.

Ktoś mógłby wytłumaczyć z czego to wynika?

		<div id="main">		
		
		<SPAN class=stats>STATYSTYKA</SPAN>
		<br></br><br></br> 
		<SPAN class=stats;text-align:center>TEST</SPAN>
			
	</div>

A jeszcze wrzucę style.css

 .stats
 {	
	 float:left;
	 color: red;
	text-align:center;	
 }

#main
{
	float: left;
	width: 960px;
	min-height: 620px;
	padding:20px;
	background-color: lightgray;
	text-align: center;
	font-size: 18px;
}

Dodam jeszcze, że gdy próbuje ustawić coś do spana, to wszystko działa według hierarchi. Text-Align to JEDYNA komenda która mi nie wchodzi. Pomocy.

komentarz zamknięcia: Nauczony :)

1 odpowiedź

odpowiedź 13 maja 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

"stats" nie stats to po pierwsze, po drugie identyfikator jest bardziej bezpośredni niż klasa i odnosi się do jednego elementu, co chcesz z tym zrobić, mają być obok siebie w jednej linii na środku kolumn?

komentarz 13 maja 2019 przez manager96 Bywalec (2,050 p.)

<SPAN class="stats">STATYSTYKA</SPAN>

cudzysłowia nie pomogły nadal bez zmian.

Przepraszam myślałem że SPAN będzie > id, dzięki za radę.

Jednak nadal nie udało mi się wyśrodkować tej lini. Poprawiłem błędy.

komentarz 13 maja 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="tekst">
        <p>STATYSTYKA</p>
    </header>
    <main class="tekst2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quisquam nulla est voluptate soluta fugit, esse
        similique eveniet possimus magni accusantium aliquam quidem, voluptatibus in doloribus dolore eum unde quasi.
        Eos, nam assumenda debitis fugiat nulla laudantium eveniet deserunt velit doloribus atque minima est sint! At
        similique, illo accusamus rerum alias unde aperiam iste ipsa quaerat quos optio explicabo accusantium quidem? Et
        aliquid hic quos animi accusantium minima. Iste repudiandae tempore totam officiis aut unde at alias, suscipit
        minima rem repellat, eius minus quam odit. Vero, veniam accusamus incidunt ex, nesciunt voluptas accusantium,
        inventore provident molestias reiciendis sint beatae repellendus.
    </main>
    <footer>

    </footer>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    font-size: 20px;
    box-sizing: border-box;
    text-transform: uppercase;
    padding: 0 5%;

}

header {
    width: 100%;
    min-height: 50vh;
    background-color: red;
    text-align: center;
}

main {
    width: 100%;
    min-height: 50vh;
    background-color: grey;
    text-align: center;
}