我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
此分類上一篇: Margin:0px auto:
此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
其他回答
使用下面的代码。
HTML
<div id="outer">
<div id="inner">Foo foo</div>
</div>
CSS
#outer {
text-align: center;
}
#inner{
display: inline-block;
}
最简单的方式之一......
<!DOCTYPE html>
<html>
<head>
<style>
#outer-div {
width: 100%;
text-align: center;
background-color: #000
}
#inner-div {
display: inline-block;
margin: 0 auto;
padding: 3px;
background-color: #888
}
</style>
</head>
<body>
<div id ="outer-div" width="100%">
<div id ="inner-div"> I am a easy horizontally centered div.</div>
<div>
</body>
</html>
可以使用 CSS 3 Flexbox. 在使用 Flexbox 时,您有两种方法。
设置主显示:flex; 并将属性 {justify-content:center;,align-items:center;} 添加到您的主元素。
#outer { 显示: flex; justify-content: center; align-items: center; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
设置父母显示:flex 并将 margin:auto 添加到孩子身上。
#outer { 显示: flex; } #inner { margin: auto; } <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>
这将你的内心分散为垂直和垂直:
#outer{
display: flex;
}
#inner{
margin: auto;
}
只有垂直调整,变化
margin: 0 auto;
垂直,变化。
margin: auto 0;
CSS3:
您可以在父母容器上使用以下风格平等地分配儿童元素:
display: flex;
justify-content: space-between; // <-- space-between or space-around
关于正当内容的不同价值观的好示范。
此分類上一篇
CanIUse:浏览器兼容性
尝试一下:
#containerdiv {显示: flex; justify-content: space-between; } #containerdiv > div {背景颜色:蓝色;宽度: 50px;颜色:白色;文本平行:中心; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="containerdiv"> <div>88</div> <div>77</
