Comment implémenter une mise en page simple et centrée en utilisant HTML et CSS

Comment utiliser HTML et CSS pour implémenter une mise en page centrée simple

Dans la conception Web, la mise en page centrée est une méthode de mise en page très courante. En utilisant HTML et CSS, nous pouvons facilement implémenter une mise en page centrée simple et esthétique.

Avant de commencer, nous devons établir une structure HTML de base. Tout d’abord, nous créons un élément <div> qui contient du contenu, puis le plaçons dans un conteneur <code><div> avec un identifiant unique. Ensuite, nous introduisons un fichier CSS externe dans la balise du fichier HTML pour nous faciliter l'écriture et la gestion des styles. <code><div>元素，然后将其放置在一个带有唯一ID的<code><div>容器中。接下来，我们在HTML文件的标签中引入一个外部的CSS文件，方便我们编写和管理样式。<p>下面是一个基本的HTML结构，作为例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt; &lt;title&gt;居中布局&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;container&quot;&gt; &lt;div id=&quot;content&quot;&gt; &lt;h1&gt;我的居中布局&lt;/h1&gt; &lt;p&gt;这是一个示例文本。&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>接下来，我们将使用CSS来居中布局。我们将通过一系列的样式来实现这一目标。</p><p>首先，我们需要设置容器的样式。我们将使用flex布局来实现居中布局。在样式表(styles.css)中，添加以下代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>#container { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f3f3f3; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>上述代码中，<code>display: flex;使用flex布局，align-items: center;用于水平居中，justify-content: center;用于垂直居中，height: 100vh;设置容器高度为视口高度，background-color: #f3f3f3;设置背景颜色，你可以根据需要自行更改。

接下来，我们需要设置内容的样式。为了使内容居中，我们设置为内联块级元素，并添加一些边距来保持间距。在样式表(styles.css)中，添加以下代码：

#content {
    display: inline-block;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

p {
    color: #666;
}

上述代码中，我们使用display: inline-block;将内容设置为内联块级元素，text-align: center;使其居中对齐，padding: 20px;添加一些内边距来保持间距，background-color: #fff;设置背景颜色为白色，border-radius: 5px;添加圆角，box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);添加阴影效果，color: #333;和color: #666;

Voici une structure HTML de base à titre d'exemple :

rrreee

Ensuite, nous utiliserons CSS pour centrer la mise en page. Nous y parviendrons à travers une série de styles.

Tout d’abord, nous devons définir le style du conteneur. Nous utiliserons la disposition flexible pour obtenir une disposition centrée. Dans la feuille de style (styles.css), ajoutez le code suivant :

rrreee🎜Dans le code ci-dessus, display: flex; utilise la disposition flex et align-items: center; code> utilise Pour le centrage horizontal, <code>justify-content: center; pour le centrage vertical, height: 100vh; définit la hauteur du conteneur sur la hauteur de la fenêtre, background-color : #f3f3f3 ;Définissez la couleur d'arrière-plan, vous pouvez la modifier selon vos besoins. 🎜🎜Ensuite, nous devons styliser le contenu. Pour centrer le contenu, nous le configurons comme un élément de niveau bloc en ligne et ajoutons une marge pour maintenir l'espacement. Dans la feuille de style (styles.css), ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons display: inline-block; pour définir le contenu sur un élément de niveau bloc en ligne, text -align: center;Alignez-le au centre, padding: 20px;Ajoutez un peu de remplissage pour maintenir l'espacement, background-color: #fff;Set l'arrière-plan La couleur est blanche, border-radius: 5px;Ajouter des coins arrondis, box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);Ajouter effet d'ombre, color: #333; et color: #666; sont utilisés pour définir la couleur des titres et des paragraphes. Vous pouvez également la modifier selon vos besoins. 🎜🎜Grâce aux étapes ci-dessus, nous avons réussi à mettre en œuvre une mise en page centrée simple et belle. Maintenant, vous pouvez exécuter ce fichier HTML dans votre navigateur pour voir l'effet. 🎜🎜Résumé : 🎜Une mise en page simple et centrée peut être facilement mise en œuvre en utilisant HTML et CSS. En définissant le style du conteneur sur une mise en page flexible et en définissant le style du contenu, nous pouvons obtenir des effets de centrage horizontal et vertical. Le code ci-dessus peut être utilisé comme modèle de base, et des ajustements et améliorations appropriés peuvent être apportés si nécessaire au cours du développement réel. J'espère que cet article vous sera utile ! 🎜