css - 似乎无法将我的链接集中在适当的 div 中

Question

我正在努力使这些标题链接在横幅中居中，但不知道为什么它们会卡在左边一点...

我在下面包含了代码和 JSFiddle 的链接：http: //jsfiddle.net/bUNpX/

这是HTML

<div id="container">

<div id="services">

            <div id="service1" class="serviceNavLink">
                <div id="wraparound">
                    <a href="#">Marketing Strategy</a>
                </div>
                <p></p>
            </div>

            <div id="service2" class="serviceNavLink">
                <div id="wraparound">
                    <a href="#">Outsourced Marketing</a>
                </div>
                <p></p>
            </div>                

            <div id="service3" class="serviceNavLink">
                <div id="wraparound">
                    <a href="#">Market Research</a>
                </div>
                <p></p>            
            </div> 
</div>

这是CSS

#container {
width:500px;
margin-left: auto;
margin-right: auto;
}

#services {
/* background-color: #ff0000; */ /* DEBUG ONLY */
overflow:auto;
width:100%;
margin-left: auto;
margin-right: auto;
}


#wraparound {
position:relative;
padding:10px 30px;
margin:15px -10px 0 -10px;
border:0.5px solid #6f3368;
background:#902684;
color:#6A6340;
box-shadow: 0 4px 4px;
}

 #wraparound:before,
 #wraparound:after {
 content:" ";
 border-top:10px solid #452e43;
 position:absolute;
 bottom:-10px;
 } 

 #wraparound:before {
 border-left:10px solid transparent;
 left:0;
 }

 #wraparound:after {
 border-right:10px solid transparent;
 right:0;
 }


#service1 {
float:left;
width:50%;
margin-left:15px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
}

#service2{
/* background-color: blue; */ /* DEBUG ONLY */
float:left;
width:50%;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
}

#service3{
/* background-color: blue; */ /* DEBUG ONLY */
float:left;
width:50%;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
box-shadow:  -2px -3px 10px 1px rgba(5, 0, 0, .5);
}

.serviceNavLink{
margin: 16px;
}

#services a:hover {
color: #FFF;
}

#services a {
margin: 0 1em 0 1em; /*top, right, bottom, left*/
text-decoration: none;
color:#FFF;
}

#services a:hover {
color: #000;
}

#services p {
font-size: 14px;
}​

Answer 1

添加一个 text-align: center 为我工作。

#services {
/* background-color: #ff0000; */ /* DEBUG ONLY */
overflow:auto;
width:100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}

http://jsfiddle.net/bUNpX/1/

Answer 2

将以下代码添加到您的环绕 id

text-align: center

Answer 3

尝试text-align:center

#wraparound {
        position:relative;
        padding:10px 30px;
        margin:15px -10px 0 -10px;
        border:0.5px solid #6f3368;
        background:#902684;
        color:#6A6340;
        box-shadow: 0 4px 4px;
        text-align:center;
}

示例：http: //jsfiddle.net/bUNpX/2/

Answer 4

添加：文本对齐：中心；到#wraparound 工作。

见下文

#wraparound {
    position:relative;
    padding:10px 30px;
    margin:15px -10px 0 -10px;
    border:0.5px solid #6f3368;
    background:#902684;
    color:#6A6340;
    box-shadow: 0 4px 4px;
    text-align:center;
    }