Fatal编程技术网
  • css/
  • Css 在曲线框内创建一个居中的曲线框

Css 在曲线框内创建一个居中的曲线框

css html

Css 在曲线框内创建一个居中的曲线框,css,html,curve,Css,Html,Curve,我有另一个css问题，我希望可以很快得到补救。我试图简单地用一种背景色创建一个文本曲线框，在另一种颜色的曲线框内垂直和水平居中。我尝试对一个框使用border-width属性，但这只弯曲了框的外部边界，没有额外弯曲内部边界。我几乎让它工作，但它不是垂直居中。这不会太难，但我遇到麻烦了。代码如下： <html> <head> <style type="text/css"> div#outer { margin:0 auto; width:100%

我有另一个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>
我给了外层舱一个填充顶：5px；和-5px的高度希望这是你需要的-

啊，我爱这里的每一个人！添加位置：相对，顶部：5px修复了问题！谢谢佐尔坦！