这个问题在这里已有答案:
我试图在页面上水平居中 <div>
块元素并将其设置为最小宽度 . 最简单的方法是什么?我希望 <div>
元素与我的页面的其余部分内联 . 我将尝试绘制一个例子:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
22 回答
margin-left的使用:auto和margin-right:auto在某些情况下可能不起作用 . 这是一个永远有效的解决方案 . 您指定所需的宽度,然后将左边距设置为剩余宽度的一半 .
请使用以下代码,您的div将位于中心
}
在这里我添加正确的答案
您可以使用此代码段并自定义 . 这里我使用2个子块 . 这应该显示页面的中心 . 您可以使用一个或多个块 .
对此问题的最佳回答是使用
margin-auto
但是要使用它,您必须知道px
或%
中的div
的width
.CSS代码:
我使用div和span标签以及css属性,例如块,跨浏览器内联块和文本对齐中心,请参阅我的简单示例
九年后,我认为是时候推出新版本了 . 这是我的两个(现在是一个)最爱 .
Margin
将
margin
设为auto
. 你应该知道方向序列是margin: *top* *right* *bottom* *left*;
或margin: *top&bottom* *left&right*
Center: Depricated, don't use this!
使用
<center></center>
标记作为<div></div>
的回绕 .例:
如ck has said,并非所有浏览器都支持min-width
如果旧浏览器不是问题,请使用HTML5 / CSS3 . 如果是,请应用polyfills并仍然使用HTML5 / CSS3 . 我假设你的div在这里没有边距或填充,但它们相对容易解释 . 代码如下 .
这样做是:
将
div
相对于其容器定位;将
div
的左边界水平放置在 its container width 的50%处;水平翻译 the div's own width 的50% .
很容易想象这个过程确认
div
最终会水平居中 . 作为奖励,您可以 center vertically 免费:这种方法的优点是你不必做任何违反直觉的事情,例如考虑你的div文本,将它包装在一个(通常在语义上无用的)附加容器中,或者给它一个固定的宽度,这不是永远可能 .
如果需要,请不要忘记
transform
的供应商前缀 .JsFiddle
在大多数浏览器中,这将工作:
在IE6中,您需要添加另一个外部
div
:CSS , HTML :
您的图表也显示了一个块级元素(通常是div),而不是内联元素 .
在我的头脑中,FF2 / Safari3 / IE7支持
min-width
. 可以使用hackety CSS或简单的JS来为IE6做 .你可以在你的CSS上使用
margin: 0 auto
而不是margin-left: auto; margin-right: auto;
如果您知道div的宽度并且它已修复,则可以使用以下css:
'half-of-div-width'应该(显然)是你div的宽度的一半 .
你可以使用这个位置:relative;然后设置左侧和顶部值:
最小宽度不是全局支持的,但可以使用
然后你可以设置你的div
如果
<div>
有position: absolute
,则需要使用width: 100%;
您应该在父元素上使用
position: relative
和text-align: center
,然后在要居中的子元素上使用display: inline-block
. 这是一个简单的CSS设计模式,可以在所有主流浏览器中使用 . 以下是一个示例或查看CodePen Example .在您的html文件中,您写道:
你写的css文件:
适合我 .
使用jQuery:
或者,如果你想用类“.myElement”居中每个元素:
在 non-fixed width div的情况下(即你不知道div将占用多少空间) .
请记住
#yourdiv
的宽度是动态的 - >它会增长和缩小以适应其中的文本 .您可以在Caniuse上查看浏览器兼容性
问题的 Headers 和内容实际上是不同的,所以我将使用
Flexbox
发布两个解决方案 .我猜
Flexbox
将在IE8和IE9完全被破坏时替换/添加到当前的标准解决方案;)检查当前的Browser compatibility table for flexbox
Single element
Multiple elements but center only one
默认行为是
flex-direction: row
,它将所有子项对齐在一行中 . 将其设置为flex-direction: column
将有助于堆叠线 .将此类添加到您的css文件中它将完美地执行步骤做:
1)首先创建它
2)将此添加到您的CSS