在弯曲长方体内创建居中弯曲长方体答案

【问题标题】：Create A Centered Curved Box Inside a Curved Box在弯曲长方体内创建居中弯曲长方体
【发布时间】：2012-01-26 18:21:44
【问题描述】：

我遇到了另一个 css 问题，希望可以快速解决。我试图简单地拥有一个具有一种背景颜色的弯曲文本框，在另一个颜色的另一个弯曲框中垂直和水平居中。我尝试对一个盒子使用border-width属性，但这只弯曲了盒子的外边框，而不是另外的内边框。我几乎让它工作了，但它没有垂直居中。这不能太难，但我正在碰一堵砖墙。代码如下：

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

【问题讨论】：

啊，我爱这里的每个人！添加 position:relative 和 top:5px 解决了这个问题！谢谢佐尔坦！

标签： css html curve

【解决方案1】：

我给外部 div 一个 padding-top: 5px;和 -5px 从高度希望这是你需要的 - http://jsfiddle.net/6Bh5x/1/

【讨论】：