0

我试图在不使用边距的情况下在页面中间获得一个框。

我试过了-

.box-middle
{
vertical-align:middle;
height:100px;
width:100px;
border:1px solid #ddd;

}

这根本行不通-

但是设置边距属性的东西有效，我不想使用margin. 因为提供边距会破坏响应式网页设计。

所以我有一个登录表单，想将它设置在页面中间。

请指导！

在这里你可以用这个盒子做技巧 -

请让我居中

4

4 回答 4

2

使用以下 jQuery 代码：

  $(window).resize(function(){

  $('.className').css({
    position:'absolute',
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
  });

  });

// 初始运行函数：

 $(window).resize();
于 2013-04-20T20:23:00.203 回答
1

我已经更新了你的小提琴

.box-middle
 {
 text-align:center;
 margin: 50px auto;
 height:100px;
 width:100px;
 border:1px solid #ddd;
background:#98bf26;

 }

<div style="border:1px solid">
 <div class="box-middle"></div>
</div>
于 2013-04-20T10:21:00.103 回答
0

尝试这个：

.box-middle
{
margin-top:-50px;/*half the box's height*/
    margin-left:-50px;/*half the box's width*/
height:100px;
width:100px;
border:1px solid #ddd;
    background:#98bf26;
position: absolute;
top: 50%; left: 50%;

}

http://jsfiddle.net/LTec3/1/

于 2013-04-20T08:43:20.180 回答
0

您可以使用绝对位置手动居中

这将使大小为 20/60/20，并将根据用户窗口的一侧进行调整：

<DIV style="position:absolute; top:249px; left:20%; width:60%; height:700px;">

或者

<DIV style="position:absolute; top:249px; left:435px; width:233px; height:700px;">

还有简单的中心标签：

<center>
于 2013-04-20T09:25:09.927 回答