我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
.outer {
text-align: center;
width: 100%
}
其他回答
如果有人想要一个 jQuery 解决方案的中心调整这些 divs:
$(window).bind("load", function() {
var wwidth = $("#outer").width();
var width = $('#inner').width();
$('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。
垂直调整到CSS中中心:
#outer {
display: flex;
justify-content: center;
}
垂直 + 垂直到中心在 CSS 中:
#outer {
display: flex;
justify-content: center;
align-items: center;
}
Flex 有超过97%的浏览器支持覆盖范围,可能是解决这些问题的最佳方式:
#outer {
display: flex;
justify-content: center;
}
它是如此简单。
只需决定你想要给内部Div的宽度,然后使用下面的CSS。
CSS
.inner{
width: 500px; /* Assumed width */
margin: 0 auto;
}
福克斯
此分類上一篇: <div id="outer"> <div id="inner">Foo foo</div> </div>
文本编辑:中心
應用文本順序:中心的內線內容集中在線框內. 但是,因為內部 div 有默定的寬度: 100% 你必須設定一個特定的寬度或使用下列之一:
显示: 区块 显示: 内线 显示: 内线 区块
此分類上一篇: <div id="outer"> <div id="inner">Foo foo</div> </div>
使用边界: 0 auto 是另一个选项,它更适合较老的浏览器兼容性。
此分類上一篇: <div id="outer"> <div id="inner"> Foo foo</div> </div>
转型
<中心>(分散)