如何在所有浏览器和设备的网页上集中某些元素?

时间:2015-01-09 20:19:52

标签: javascript jquery html css cross-browser

我有一些元素,div或任何有id的东西,我想把它放在网页上。 但是当它在电脑屏幕上看起来不错时,它在移动设备上看起来很糟糕 如何正确地使用任何框架(如bootstrap或其他东西),或者没有任何方法,jquery也是可能的。 它在所有移动设备和所有计算机浏览器上看起来都很好。 感谢。

4 个答案:

答案 0 :(得分:2)

我会给你一个绝对中心(水平和垂直)位置的​​另一个解决方案,它永远不会失败并适用于我测试的每个浏览器(即8 +)。

您拥有 HTML

<div id="centered">
   <!-- Place your content here -->
</div>

以下是绝对中心 CSS (水平和垂直):

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

以下是您只想要垂直

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  right:0;
  left:0;
  margin:auto;
}

只有横向

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

答案 1 :(得分:1)

很简单。 的 HTML

<div id="container">
   <div id="content">
     Your content here. It can be text, image or anything.
   </div>
</div>

<强> CSS

#container{
  width:auto;
  height: auto;
}

#content{
width:90%
height:90%;
margin:auto;
}

注意: margin auto实际上以对齐为中心,有时它取决于场景。有固定高度和宽度的地方,更容易。古德纳克

提示 如果你想看到对齐方式,你应该在设计过程中在CSS中使用#selector{border:solid};然后你可以删除它..

答案 2 :(得分:1)

试试这个:

<div class="center">
 <p>.........content...........</p>
</div>

现在CSS:

.center{
 margin:0 auto; 
 width:500px; /*adjust your width*/
}

答案 3 :(得分:1)

CSS

 .flexme{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    }     

HTML

 <div class = 'flexme' style = 'position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/

第一个div占据整个屏幕并有一个显示:为每个浏览器设置flex。第二个div(居中的div)利用了display:flex div,其中margin:auto工作得很好。

注意 IE11 +(IE10带前缀)