我正在尝试这样做,所以这些标题链接在横幅中居中,但不知道为什么他们会被困在左边......
我在下面提供了代码和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;
}
答案 0 :(得分:0)
添加text-align:center对我有用。
#services {
/* background-color: #ff0000; */ /* DEBUG ONLY */
overflow:auto;
width:100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
答案 1 :(得分:0)
将以下代码添加到回绕ID
text-align: center
答案 2 :(得分:0)
尝试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;
}
答案 3 :(得分:0)
添加: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;
}