怎样才能垂直集中一个元素?

我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?

<div id="outer">
  <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;
}

2017-05-17 09:07:03

其他回答

福克斯

此分類上一篇: <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>

转型

<中心>(分散)

2017-06-09 08:34:30

如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:

#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

这使得内部的DIV变成一个可以与文本平行集中的内线元素。

2011-01-20 22:55:26

button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)

2021-03-30 07:45:19

<!DOCTYPE html> <html> <head> <title>Center</title> <style>.outer{ 文本平衡:中心; }.inner{ 宽度: 500px; 边界: 0 自动; 背景: 棕色; 颜色: 红色; } </style> </head> <body> <div class="outer"> <div class="inner"> 此 DIV 是中心的</div> </div> </body>

请尝试一下,它将工作没有HTML中心标签。

2018-07-15 15:00:52

我们可以使用Flexbox来实现这一点:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

中心一个 div 内部一个 div 垂直:

#outer {
   display: flex;
   justify-content: center;
}

此分類上一篇

中心一个DIV内部一个DIV垂直:

#outer {
    display: flex;
    align-items: center;
}

此分類上一篇

到完全中间的 div 垂直和垂直:

#outer{
    display: flex;
    justify-content: center;
    align-items: center;
}

此分類上一篇

2019-07-12 18:09:27

怎样才能垂直集中一个元素?

推荐文章

最新文章

标签