我遇到了另一个 css 问题，希望能尽快解决。我试图简单地让一个带有一种背景颜色的 flex 文本框垂直和水平居中在另一个颜色的另一个 flex 框内。我尝试对一个框使用 border-width 属性，但它只 flex 了框的外边框，而不是另外的内边框。我几乎让它工作了，但它没有垂直居中。这不会太难，但我正在碰壁。这是代码:
<html>
<head>
<style type="text/css">
div#outer {
margin:0 auto;
width:100%;
height:50px;
background-color:#0000FF;
border-radius:5px;
-webkit-border-radius:5px;
text-align:center;
}
#inner{
margin:0 auto;
width:95%;
height:40px;
margin-top:5px;
display:block;
background-color:#ff0000;
border-radius:5px;
-webkit-border-radius:5px;
color:#FFF;
font-size:24px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:40px;
text-align:center;
}
</style>
</head>
<body>
<div id="outer"><div id="inner">Centered Text goes here</div></div>
</body>
</html>
最佳答案
我给外面的 div 一个 padding-top: 5px;和 -5px 从高度希望这是你需要的 - http://jsfiddle.net/6Bh5x/1/
关于css - 在弧形框内创建居中弧形框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9023205/