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