Question

我得到了另一个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>

Answer 1

我给了外部div一个填充顶部：5px;和-5px从高处希望这是你需要的 - http://jsfiddle.net/6Bh5x/1/

在弯曲的盒子里面创建一个中心弯曲的盒子

1 个答案: