关于元素浮动后垂直居中和水平居中的方法

最新推荐文章于 2024-02-19 16:39:26 发布

睡着的水9527

最新推荐文章于 2024-02-19 16:39:26 发布

阅读量1.6k

点赞数

文章标签： css html html5

// 这些方法也是在网上看网友的经验,以后可能用的着

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle; 
}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right; 
} 
</style> 
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body> 
</html>
浮动元素既垂直又水平居中的方法

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle;
margin:0 auto;
}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right; 
} 
/* 浮动元素水平居中
二种方法 1、父级div设置固定宽度后
加margin:0 auto; 然后子级div加浮动，
即可实现；不过此方法不能无限伸展； 
2、在table内插入div，div设置浮动，
在table上设置margin:0 auto; 而table不
要设置宽度，因为table默认是宽度最小化的，实现居中的
*/
#d3{/*让浮动元素水平居中的方法1*/
width:50px;
margin:0 auto;
}
table{/*让浮动元素水平居中的方法2*/
margin:0 auto;
}
</style> 
</head>
<body>
<div id="d1">
<!-- <div id="d3"><div id="d2"></div></div> -->
<table>
<tr>
<td><div id="d2"></div></td>
</tr>
</table>
</div>
</body> 
</html>

原账号已注销 https://blog.csdn.net/Jim_Carrey/article/details/50868478

睡着的水9527

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于元素浮动后垂直居中和水平居中的方法

// 这些方法也是在网上看网友的经验,以后可能用的着<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>子元素在父元素里面垂直居中</title><link rel="stylesheet" type="text/css" href=""/><style>#d1{border:thin solid red;wi.
复制链接

扫一扫