css - Margin Auto 需要居中

标签 css alignment margin center

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

    <!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>

它随页面调整大小,但我无法将整个内容置于页面中央。 我只想将整个内容放在页面中间

最佳答案

去掉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

关于css - Margin Auto 需要居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15856221/

相关文章:

css - 链接时图像下方的边距

javascript - 您可以使用 Javascript 动态地将事件监听器添加到 for 循环中的变量吗

html - 使用 materialize CSS 对齐按钮旁边的文本

css - margin: 0 auto 不会出现在中心

css - Bootstrap 删除行中的间距宽度并尊重宽度

javascript - 并排动态对齐div

css - 如何使用 Adob​​e Target 创建内联 block 营销事件内容

css - 强制页脚到页面底部

javascript - 动画 bootstrap carousel-caption

html - 为什么我的图像没有与网格列的底部对齐?