似乎無法將我的鏈接居中在適當的div中

-1

我試圖讓這些標題鏈接在橫幅中居中，但不知道爲什麼它們卡在左邊一點點......似乎無法將我的鏈接居中在適當的div中

我已經包含下面的代碼和一個的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>

和她e的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; 
}

來源

2013-01-03 Forb3s

只需添加 #wraparound {文本對齊：中心} – eberswine

嘗試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/

來源

2013-01-03 02:49:15 Nandu

真棒的感謝！完全合作！ – Forb3s

@ Forb3s - 如果能令人滿意地解決您的問題，請記住[接受答案]（http://meta.stackexchange.com/a/5235/194698）。 – Krease

添加文本對齊：中心爲我工作。

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

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

來源

2013-01-03 02:40:55

下面的代碼添加到您的環繞ID

text-align: center

來源

2013-01-03 02:41:29 trollster

添加：text-align：center;到#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; 
    }

來源

2013-01-03 14:52:13 Forb3s

似乎無法將我的鏈接居中在適當的div中

回答

相關問題