課程
/前端開(kāi)發(fā)
/HTML/CSS
/初識(shí)HTML(5)+CSS(3)
兩個(gè)塊狀元素并排居中顯示的代碼?
2019-06-25
源自:初識(shí)HTML(5)+CSS(3) 13-4
正在回答
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動(dòng)模型</title>
<style type="text/css">
.div{
? ? width:300px;
? ? height:150px;
? ? margin:auto;
}
.div .div1{
border:2px red solid;
? ? width:100px;
? ? height:100px;
? ? float:left;
</style>
</head>
<body>
? ? <div class="div">
? ? ? ? <div class="div1"></div>
? ? </div>
</body>
</html>
你說(shuō)的是垂直居中吧,兩個(gè)元素都加上這個(gè)
{display:inline-block;
vertical-align:middle;}
舉報(bào)
HTML(5)+CSS(3)基礎(chǔ)教程8小時(shí)帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義
2 回答想讓兩個(gè)塊狀元素并排顯示,設(shè)置display:inline;不行嗎?
2 回答float會(huì)使元素塊狀化,塊狀元素又是獨(dú)占一行,那為何兩個(gè)Div設(shè)置了float會(huì)并排顯示
2 回答塊狀元素居中問(wèn)題
1 回答塊狀元素居中設(shè)置
3 回答塊狀元素不固定寬度,還是顯示居中啊。
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2019-09-24
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動(dòng)模型</title>
<style type="text/css">
.div{
? ? width:300px;
? ? height:150px;
? ? margin:auto;
}
.div .div1{
border:2px red solid;
? ? width:100px;
? ? height:100px;
? ? float:left;
}
</style>
</head>
<body>
? ? <div class="div">
? ? ? ? <div class="div1"></div>
? ? ? ? <div class="div1"></div>
? ? </div>
</body>
</html>
2019-06-25
你說(shuō)的是垂直居中吧,兩個(gè)元素都加上這個(gè)
{display:inline-block;
vertical-align:middle;}