【问题标题】:Margin Auto Need to be centeredMargin Auto 需要居中
【发布时间】:2013-03-29 04:25:35
【问题描述】:

这是我的代码,我试图让它在页面中间居中

    <!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
  <font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>

<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>

它会随着页面重新调整大小,但我无法将整个内容放在页面的中心。 我只想把整个东西放在页面中间

【问题讨论】:

  • 你也想让它垂直居中吗?
  • 那个未闭合的中心标签是干什么用的?

标签: css alignment margin center


【解决方案1】:

删除center标签并设置margin-top:25%,它会解决你的问题。

CSS

.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}

HTML

<div class="span12">
Welcome
</div>

jsFiddle Live Demo

【讨论】:

  • 我删除了中心标签并按照你说的做了但是现在它刚刚从页面上消失了。
  • 是的,这很完美,但我的不这样做
  • @user2139212 你的浏览器是什么?
  • @user2139212 删除此行并重试:&lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  • 我知道,但我需要那行,我可以关闭它
猜你喜欢
  • 2016-06-19
  • 2015-10-24
  • 2018-09-04
  • 1970-01-01
  • 1970-01-01
  • 2013-04-19
  • 2011-06-24
  • 2010-11-01
  • 2011-01-27
相关资源
最近更新 更多