我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
与网
一个非常简单和现代的方式是使用显示器:网:
div { 边界: 1px dotted 灰色; } #outer { 显示: 网; 地点标题: 中心; 高度: 50px; /* 不需要 */ } <!DOCTYPE html> <html> <head> </head> <body> <div id="outer"> <div> Foo foo</div> </div> </body> </html>
其他回答
在下面的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
使用:
#outerDiv { 宽度: 500px; } #innerDiv { 宽度: 200px; 边缘: 0 auto; } <div id="outerDiv"> <div id="innerDiv"> 内部内容</div> </div>
<div id="outer"> <div id="inner">Foo foo</div> </div>
有几种方法可以实现这一点:使用“flex”,“positioning”,“margin”等。
我推荐使用“Flex”
#outer {
display: flex;
justify-content: center;
align-items: center; /* if you also need vertical center */
}
使用地平线定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
translate: transformX(-50%)
}
垂直和垂直,使用定位
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: transform(-50%, -50%)
}
使用边界的垂直调整
#inner {
width: fit-content;
margin: 0 auto;
}
可以用很多方法来做到这一点,很多男孩/男孩的答案是正确的,并且工作得很好,我会给一个更不同的模式。
在HTML文件中
<div id="outer">
<div id="inner">Foo foo</div>
</div>
在 CSS 文件中
#outer{
width: 100%;
}
#inner{
margin: auto;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
