在CSS中,我們可以使用多種方法使兩個(gè)盒子并列居中,以下是一種簡(jiǎn)單有效的方法:
我們需要?jiǎng)?chuàng)建一個(gè)包含兩個(gè)盒子的HTML結(jié)構(gòu),每個(gè)盒子可以是一個(gè)div元素,或者其他任何可以創(chuàng)建元素的標(biāo)簽。
<div class="box1">Box 1</div> <div class="box2">Box 2</div>
我們可以使用CSS來使這兩個(gè)盒子并列居中,我們需要設(shè)置每個(gè)盒子的寬度和高度,然后使用一個(gè)包含它們的容器來使它們居中。
.box1, .box2 { width: 50%; /* 寬度設(shè)置為50%,以便兩個(gè)盒子可以并列 */ height: 200px; /* 高度設(shè)置為200px,可以根據(jù)需要調(diào)整 */ display: inline-block; /* 使用inline-block使盒子可以并列 */ } .container { text-align: center; /* 使用text-align:center使盒子在容器中居中 */ }
在這個(gè)例子中,我們假設(shè)container
是包含box1
和box2
的容器,為了使盒子在容器中居中,我們需要設(shè)置容器的text-align
屬性為center
,為了使盒子可以并列,我們需要設(shè)置每個(gè)盒子的display
屬性為inline-block
,這種方法簡(jiǎn)單有效,適用于多種情況。