我想垂直和水平居中使用CSS的容器和内容。垂直和水平对齐容器和容器中的内容

的标记看起来是这样的：

<div id="container"> 
    <img src="..someimage.jpg"> 
    <img src="..someverticaldivider"> 
    <form action="action.php"> 
    <input type="text"> 
    .... (other inputs) 
    </form> 
</div>

我需要的最终结果是这样的： result

到目前为止，我的CSS是这样的：

#content{ 
    position:absolute; 
    width: 900px; 
    left:50%; 
    top:50%; 
    height:300px; 
    margin-top:-150px; 
    margin-left: -450px; 

}

那工作正常，如果我添加一个边框到#content，我可以很容易地看到它的确在水平和垂直居中。

我面临的问题是我不知道#content内的大小。我需要能够对齐这些元素2图像和1形式水平和垂直。我检查了this site为垂直居中，但问题是，我不知道我的内容的大小，并且内容不仅是文本。

支持旧版浏览器（IE7及更高版本）的最佳方法是什么？

来源

2012-01-31 F21

你可以使用JavaScript？ – malonso 2012-01-31 02:38:14

@malonso：我想只使用CSS来做到这一点。 – F21 2012-01-31 02:42:13

我也有同样的问题，我认为你的问题似乎与我相似。只需转到此页http://pmob.co.uk/pob/hoz-vert-center.htm，然后找到“未知高度和宽度的垂直中心元素”主题。也许这个链接可以解决你的问题。 – 2012-01-31 10:18:27

编辑1
这里是陪审团的最终结果
这也垂直居中的盒子里面的内容（图片，垂直标尺，形式）
http://jsfiddle.net/HerrSerker/TuPvF/13/

我试图给出一个权威的答案这个。也许这不适用于手机浏览（智能手机，iPad等）。谁可以检查？

在现代浏览器中使用display: table和display: table-cell支持他们使用vertical-align与他们合作。

在一些老的IE相关措施使用浏览器定位

http://jsfiddle.net/HerrSerker/TuPvF/

<!-- HTML --> 
<div class="table"> 
    <div class="cell"> 
     <div class="inner"> 
      <div class="align"> 
       <img src="//lorempixel.com/200/300"> 
      </div> 
      <div class="align"> 
       <img src="//lorempixel.com/200/200"> 
      </div> 
     </div> 
    </div> 
</div>

/* all css rules prepended by a hash sign (#) are specifically for IE 7 and below */ 

html, body { 
    /* w3c dropped height percentage in some css2 or so version 
     * if you don't know the heights of ALL the parent element up to the root. 
     * So give ALL parents a known height 
     * CAVE: If mobile browsing is important check, if this does not affect scrolling and zooming 
     */ 
    height: 100%; 
} 
.table{ 
    /* modern browsers support display: table 
    * use this for an easy vertical alignment 
    */ 
    height: 100%; 
    width: 100%; 
    display: table; 
    /* check if you want absolute positioning */ 
    position: absolute; 
    /* if you don't want absolute positioning, uncomment the next line and comment the previous line out */ 
    /* #position: relative */ 
} 
.table > .cell { 
    /* modern browsers support display: table-cell 
    * use this for an easy vertical alignment 
    * You don't need table-row 
    */  
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    /* this is again for lte IE7 */ 
    #position: absolute; 
    /* 50% is half of the containing element (.table here) */ 
    #top: 50%; 
    #width: 100%; 
} 
.cell > .inner { 
    text-align: left; 
    display: inline-block; 
    /* triggers hasLayout in IE 6+7 */  
    #zoom: 1; 
    /* if IE 6+7 element have hasLayout, display: inline behaves as display: inline-block. Strange, huh? */ 
    #display: inline; 
    #position: relative; 
    /* here the 50% are the half of the .cell element */ 
    #top: -50%; 
} 
.cell > .inner > .align { 
    vertical-align: middle; 
    display: inline-block; 
    #zoom: 1; 
    #display: inline; 
} 


.inner { 
    border: 1px solid gold; 
    padding: 10px; 
    white-space: nowrap; 
}

来源

2012-01-31 09:24:13 HerrSerker

-1

你能否多给点信息，比如为什么你不知道内容有多大？看起来你希望CSS根据你正在加载的内容动态改变格式。我不认为这是CSS所要做的。 Javascript将是直截了当的，可能是最简单的，但你可以用PHP之类的东西做服务器端。

如果您向我们提供关于实施该环境的上下文的更多信息，我们将能够提供更具体的建议，告诉您可以采用何种方式来实现此目的。

来源

2012-01-31 02:59:41

内容包含图像，用作垂直分隔符和表单的图像。我可以知道图像的宽度，但形式是一个相当大的问题。有没有办法找出表格的大小？我还需要在'＃content'内的内容之间进行某种填充。 – F21 2012-01-31 03:04:49

@phpdev是否可以通过设置输入元素的'size'属性来限制输入的大小[w3schools的demo]（http://www.w3schools.com/tags/att_input_size.asp） – 2012-01-31 03:08:33

对于填充，我会为每个元素创建单独的id，然后在CSS中引用它们。 – 2012-01-31 03:12:59

您可以display:table-cell

fiddle

HTML做

<div id="a"> 
    <div id="b">hello<br/>world</div> 
</div>

CSS

#a { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

#b { 
    text-align:center; 
    vertical-align: middle; 
    display: table-cell; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

来源

2012-01-31 03:29:23 mpen

垂直和水平对齐容器和容器中的内容

回答

HTML做

CSS

相关问题