Solucionado
nesse código a seguir no meu css
main div {
width: 720px;
margin: auto;
}serve para centralizar o meu texto na tela né? se eu usar esse código não seria a mesma coisa né?
main div {
text-align: center;
}porquê também serve para alinhar meu texto no centro. as 2 coisas são a mesma coisas?
São coisas diferentes. Veja o seguinte exemplo
<html>
<head>
<style type="text/css">
.main{
border-width:1px;
border-style: solid;
width: 720px;
margin: auto;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<p>Meu texto aqui</p>
</main>
</body>
</html>Aqui eu tenho uma div com uma classe chamada main, e dentro dela, um paragrafo com o texto
No CSS, o width e o margin informados vão centralizar a div na horizontal. O conteúdo vai ficar alinhado a esquerda.
O text-align vai centralizar o texto dentro desta div
Se você pegar este exemplo, e apagar o margin, vai ficar mais fácil de entender a diferença
Fala Alisson! A grande diferença entre as 2 formas é o seguinte:
- Utilizando da propriedade <margin: auto;>, estamos nos referindo ao conteúdo interno da nossa tag , no seu exemplo, a tag <main div>. Ou seja, estamos centralizando todo o conteúdo da tag (inclusive o texto que esta contido em seu interior) com a pagina.
- Utilizando da propriedade <text-align: center;>, estamos nos referindo apenas ao texto contido na tag, ou seja, ele fica alinhado dentro do conteúdo, mas esse mesmo recipiente que contem o texto não sera alinhado com a pagina!
Espero que tenha ficado claro e que tenha sanado sua duvida, bons estudos!
Resumidamente:
A primeira forma usando somente "div" é uma forma genérica, ou seja, seria aplicado o estilo em todas as "div" da sua página html.
Contudo, ao utilizarmos o "main div", deixamos claro que gostaríamos que apenas fosse aplicado o estilo nas "div" que estão dentro da tag main.