0

これは私のコードで、ページの中央に配置しようとしています

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

ページに合わせてサイズが変更されますが、全体をページの中央に配置できません。ページの真ん中にすべてを配置したいだけです

4

1 に答える 1

0

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 ライブデモ

于 2013-04-06T21:39:58.910 に答える