<div 并排 居中</div>
<div>對(duì)于網(wǎng)頁設(shè)計(jì)中的排版布局，div 是一個(gè)非常重要的標(biāo)簽。div 可以將網(wǎng)頁分為多個(gè)塊狀區(qū)域，從而方便地進(jìn)行布局。而將多個(gè) div 水平并排并居中，是網(wǎng)頁設(shè)計(jì)中常用的技術(shù)之一。本文將詳細(xì)介紹如何使用 div 實(shí)現(xiàn)水平并排并居中的效果。</div>

，我們需要?jiǎng)?chuàng)建多個(gè) div 元素，并設(shè)置寬度、高度、背景顏色等樣式。下面是一個(gè)示例代碼：

<style>
.box{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-right: 10px;
}
</style>
<br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

上述代碼中，我們創(chuàng)建了三個(gè)具有相同樣式的 div 元素，并通過 float 屬性將它們水平排列。通過 margin-right 屬性可以設(shè)置 div 之間的間距。

然而，上述示例中的 div 并沒有實(shí)現(xiàn)居中的效果。接下來，我們將介紹兩種常用的方式來實(shí)現(xiàn)水平并排的 div 的居中效果。

方式一：使用 display: flex 屬性

<style>
.container{
display: flex;
justify-content: center;
}
<br>
    .box{
width: 200px;
height: 200px;
background-color: red;
margin-right: 10px;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

上述代碼中，我們給父元素容器設(shè)置了 display: flex 屬性，這樣子元素就可以水平排列。通過 justify-content 屬性可以實(shí)現(xiàn)子元素的居中對(duì)齊。

方式二：使用 text-align: center 屬性

<style>
.container{
text-align: center;
}
<br>
    .box{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
margin-right: 10px;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上述示例中，我們給父元素容器設(shè)置了 text-align: center 屬性，這樣子元素就可以在父元素中居中對(duì)齊。同時(shí)，我們將子元素的 display 屬性設(shè)置為 inline-block，讓它們水平排列。

通過上述兩種方式，我們可以實(shí)現(xiàn)多個(gè) div 元素的水平并排并居中的效果。這在網(wǎng)頁設(shè)計(jì)中具有廣泛的應(yīng)用，在導(dǎo)航欄、圖片展示等地方都可以使用這種布局方式。希望本文所介紹的內(nèi)容對(duì)您有所幫助。