* {margin: 0;
padding: 0;} 

.header {background-color:coral; height: 180px;}
.main {background-color:cadetblue; height:600px;}
.footer {background-color:aquamarine; height:100px}


#anchor {color:ghostwhite}

.div {border: 2px solid black; height: 350px; 
    background-color: rgb(193, 193, 218); 
    color: rgb(27, 23, 23); 
    width:1000px; }
<!DOCTYPE html>
<html lang="en">

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

<body >
    <header class="header" align="right"><br><br><br><br><br><br><br>
        <a href="1" id="anchor" target="_blank">HOME</a>&nbsp;
        <a href="2" id="anchor" target="_blank">PRODUCTS</a>&nbsp;
        <a href="3" id="anchor" target="_blank">BLOGS</a>&nbsp;
        <a href="4" id="anchor" target="_blank">VIDEOS</a>&nbsp;
        <a href="5" id="anchor" target="_blank">ABOUT US</a>&nbsp;
        <a href="6" id="anchor" target="_blank">CONTACT US</a>&nbsp;
    </header>

    <!-- align = center -->
    <main class="main" align="center"><br><br><br><br><br><br><br>

        <div class = "div" align="center">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reiciendis quo fugiat saepe illum aspernatur in animi totam minus nam magni consequuntur, mollitia modi voluptas architecto officiis rerum temporibus, nemo atque cumque ducimus beatae facilis natus eligendi! Illum nulla sint neque perferendis molestias exercitationem impedit voluptate atque optio harum quasi aperiam ratione facilis incidunt reprehenderit laudantium deleniti ut omnis officiis, hic natus. Eaque eligendi corporis animi tempora aliquam fuga modi alias reprehenderit temporibus ullam. Quo quas beatae consequuntur quod ducimus reiciendis quia. Ad odit magni laboriosam libero. Rerum, voluptas iste repudiandae at soluta vel maiores quisquam reprehenderit facilis nesciunt quasi porro fugiat minima fuga necessitatibus. Voluptas nemo porro dignissimos illo, quidem cum aliquam veritatis sit repellat inventore, mollitia explicabo ipsum officia quas laudantium fuga obcaecati sint aspernatur enim at ad? Corporis veniam a est quos, sint cum beatae nulla tempora sed minus necessitatibus veritatis sit ullam exercitationem consequatur consequuntur cupiditate nobis distinctio illum enim at repellendus. Nemo similique itaque, perspiciatis accusamus at distinctio reprehenderit ea dolorum obcaecati? Laborum rerum aliquam deserunt minus doloribus! Itaque reiciendis a quam alias natus ullam iste ab temporibus officiis cupiditate cum velit sed suscipit eum, aspernatur repellat autem sunt sequi impedit vero. Quo error sapiente, amet aspernatur velit facilis vero rerum! Magnam aspernatur delectus molestiae incidunt ea assumenda eveniet minus illo voluptate, porro exercitationem soluta explicabo neque adipisci placeat quis reprehenderit cum. Blanditiis voluptas illo harum tempora eius libero aspernatur deserunt ipsam! Adipisci, deleniti deserunt magni nesciunt excepturi fugiat nam autem atque unde numquam eius officia obcaecati quas rerum fuga omnis vel architecto, eum corrupti itaque quia. Culpa mollitia odio error in quis laudantium hic aut porro explicabo eligendi facilis laboriosam debitis accusamus quidem distinctio nam aliquid exercitationem non ratione tempore, tenetur ut quaerat earum? Officia ipsum cum, eos distinctio, quis saepe repudiandae sapiente doloremque explicabo quos accusantium, amet totam autem adipisci dolores dolorem ullam unde! Pariatur fugiat nihil minus aliquid ratione modi repellendus explicabo, cumque itaque cupiditate suscipit libero deserunt veniam! Sequi doloribus expedita sit sapiente obcaecati sint blanditiis accusantium neque error ullam minima, alias, quaerat praesentium. Et cupiditate fugiat culpa pariatur consequatur perferendis.
        </div>
    </main>

    <footer class="footer" align=right >&copyFlipkart.com</footer>
</body>

</html>

Pourquoi la section "DIV" ne s'aligne pas au centre ? les ancrages de la section d'en-tête, tous alignés à droite. le contenu du pied de page est trop aligné à droite. J'ai essayé la même chose pour la section principale, mais cela ne fonctionne pas ici.

enter image description here

enter image description here

0
ray_milan 2 oct. 2021 à 17:41

2 réponses

Meilleure réponse

Réécrivez simplement votre .div comme suit :

<div class = "div" align="center" style="margin:0px auto">

Bien que vous n'ayez pas besoin de l'attribut align="center" sur le div car, tout comme l'a dit @Rojo, l'attribut align ne fait que centraliser le texte. Il ne centralise pas div. Vous pouvez laisser l'attribut align="center" si vous souhaitez que le texte de votre div soit centré. Voici une image de votre code fonctionnant avec cette petite modification.

0
Awesome Bassey 2 oct. 2021 à 15:06

Tu dois faire

.main{ margin: 0 auto;}

OU

.div{ margin: 0 auto}

Être centré dans le principal.

Bonne chance :)

0
some freelancer 2 oct. 2021 à 14:47