我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
最簡單的方式之一是使用顯示器: flex. 外部 div 只需要顯示器 flex, 內部需要範圍: 0 auto 以使其以水平為中心。
要垂直集中,只需在另一个Div中集中一个Div,请查看下面的.inter 类评论。
.wrapper { 显示: flex; /* 添加我们想要的任何高度和宽度 */ 高度: 300px; 宽度: 300px; /* 只是这样你可以看到它是中心 */ 背景: peachpuff; }.inner { /* 中心 水平 */ 边界: 0 自动; /* 中心 垂直 * /* 边界: 0 自动; * /* 中心 * / * 边界: 0 自动; * / } <div class="wrapper"> <div class="inner"> 我是 ho
其他回答
在下面的CSS代码中尝试一下:
<style>
#outer {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#outer > #inner {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 30px;
padding: 14px;
vertical-align: middle;
}
</style>
<div id="outer">
<div id="inner">
...These <div>ITEMS</div> <img src="URL"/> are in center...
</div>
</div>
在使用 CSS 和使用 HTML 上方之后,网页中的该部分会看起来如下:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃V..Middle & H..Center ┣━1
┃ ┣━2
┃ ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
1 2 3 4 5
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┣━1
┃ V..Middle & H..Center ┣━2
┃ ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
1 2 3 4 5
To center "inner" elements horizontally inside the "outer" wrapper, the "inner" elements (of type DIV, IMG, etc) need to have "inline" CSS properties, such as these: display:inline or display:inline-block, etc, THEN "outer" CSS property text-align:center can work on "inner" elements.
接近最低的CSS代码如下:
<style>
#outer {
width: 100%;
text-align: center;
}
#outer > .inner2 {
display: inline-block;
}
</style>
在下面的HTML代码上应用CSS,到中心(垂直):
<div id="outer">
<img class="inner2" src="URL-1"> <img class="inner2" src="URL-2">
</div>
在使用 CSS 和使用 HTML 上方之后,网页中的行将看起来如下:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━━━┑ ┃
┃│ img URL1 │ ┃
┃┕━━━━━━━━━━┙ ┃
┃┍━━━━━━━━━━┑ ┃
┃│ img URL2 │ ┃
┃┕━━━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑ ┣━1
┃ │ img URL1 │ │ img URL2 │ ┣━2
┃ ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙ ┣━3
┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛
1 2 3 4 5
If you want to avoid specifying class="inner2" attribute everytime for each "inner" elements, then use such CSS in early:
<style>
#outer {
width: 100%;
text-align: center;
}
#outer > img, #outer > div {
display: inline-block;
}
</style>
因此,上面的 CSS 可以像下面那样应用,以中心项目(垂直)在“外部”插槽内:
<div id="outer">
<img src="URL-1"> Text1 <img src="URL-2"> Text2
</div>
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL1 │ │img URL2│ ┣━2
┃ ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2 ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
The "id" attribute's unique name/value should be used only once for only one HTML element in one webpage, So CSS properties of same "id" name cannot be repeatedly used on multiple HTML elements, (some web-browser incorrectly allows to use same id on multiple elements).
So when you need many lines in same webpage, that need to show internal elements/items in center (horizontally) in that line, then you may use such CSS "class" (aka: CSS group, CSS repeater)
答:
<style>
.outer2 {
width: 100%;
text-align: center;
}
.outer2 > div, .outer2 > div > img {
display: inline-block;
}
</style>
因此,上面的 CSS 可以像下面一样应用,以中心项目(垂直)在“外2”插槽内:
<div class="outer2">
<div>
Line1: <img src="URL-1"> Text1 <img src="URL-2">
</div>
</div>
...
<div class="outer2">
<div>
Line2: <img src="URL-3"> Text2 <img src="URL-4">
</div>
</div>
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL3│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL4│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL1│ │img URL2│ ┣━2
┃ Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL3│ │img URL4│ ┣━2
┃ Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
To vertically align in middle, we would need to use below CSS code
答:
<style>
.outer2 {
width: 100%;
text-align: center;
vertical-align: middle;
}
.outer2 > div, .outer2 > div > img {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="outer2">
<div>
Line1: <img src="URL-1"> Text1 <img src="URL-2">
</div>
</div>
...
<div class="outer2">
<div>
Line2: <img src="URL-3"> Text2 <img src="URL-4">
</div>
</div>
在使用 CSS 和使用 HTML 上方之后,网页上的这些行会看起来如下:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL3│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL4│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ Line1:│img URL1│Text1│img URL2│ ┣━2
┃ ┕━━━━━━━━┙ ┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ Line2:│img URL3│Text2│img URL4│ ┣━2
┃ ┕━━━━━━━━┙ ┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
回归2022
这是一个非常古老的问题,所以我只是试图报告今天的情况:
CSS 网络和 flexbox 是您对中心、水平或垂直的最佳选项; margin:auto 方法工作得好,如果内部内容不是一个盒子(内线区块是好的); margin 50% 与 transform:translateX(50%) 是粗糙的力量,但工作得好; 与绝对的位置和 translateX/Y 也适用于水平和垂直的中心,许多对话使用它,扩展高度
这就是2022年的样子,我希望我们永远不会需要更多的网和 flexbox。
最好的方法是使用桌面细胞显示器(内部),即与显示表(外部)的Div之后,并为内部Div(与桌面细胞显示器)设置垂直调整,并在Div或页面中心的内部Div中使用的每个标签。
注意:您必须将指定的高度设置到外面
它是最好的方式你知道没有位置相对或绝对,你可以使用它在每个浏览器一样。
#outer{ 显示: 表; 高度: 100vh; 宽度: 100%; } #inner{ 显示: 表细胞; 垂直平衡: 中间; 文本平衡: 中心; } <div id="outer"> <div id="inner"> <h1> 设置内容中心 </h1> <div> hi 这是最适合您的项目中心 </div> </div> </div> </div>
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
读完所有答案后,我看不到我最喜欢的答案,这就是你如何将一个元素集中在另一个元素中。
jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/
<p>Horz Center</p>
<div class="outterDiv">
<div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
<div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
<div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.horzCenter
{
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.trueCenter
{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.outterDiv
{
position: relative;
background-color: blue;
width: 10rem;
height: 10rem;
margin: 2rem;
}
.innerDiv
{
background-color: red;
width: 5rem;
height: 5rem;
}
推荐文章
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 内嵌CSS有什么不好?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?
