我试图将div =“center”的div在body标签中垂直和水平居中,而不会扭曲内容的位置:M,cicle div和即将推出......文本。即使它应该是一件简单的事情,也无法让它真正起作用。
HTML:
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
font-family: futura;
}
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
答案 0 :(得分:0)
<style>
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
#center
{
position:absolute;
left:50%;
top:50%;
}
</style>
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
答案 1 :(得分:0)
尽管我讨厌表格,但表格在垂直对齐方面做得很好。也许有更好的方法?
<body>
<table>
<tr>
<td>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</td>
</tr>
</table>
</body>
风格:
table {
width: 100%;
height: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
.center {
margin: auto;
}
答案 2 :(得分:0)
你可以使用一些绝对定位来完成它
#center {
position:absolute;
left:50%;
top:50%;
margin: -33px 0 0 -43px;
}
关键是你有一半宽度和一半高度的负边距来正确定位元素(仅限固定尺寸)
还要确保您的身体设置为position: relative;
才能使绝对定位正常工作。