css不會在div中居中？

所以，我試圖將該按鈕居中放在DIV中。css不會在div中居中？

按鈕是AA HREF鏈接...

這裏有一個例子....

我一直以爲我可以只設置margin 0汽車和它的工作，但我猜不會。

它曾經工作？我不知道我做錯了

<div style="background-color:#0F0; width:100%; height:100px; display:block;"> 


       <div style=" width:50%; margin:0 auto;"><a style="margin:0px;"class="btn btn-3 btn-3d icon-cog">Settings</a></div> 

        </div>

來源

2013-12-17 op1001

嘗試：

<div class="center"><a class="btn btn-3 btn-3d icon-cog">Settings</a></div> 

.center{text-align:center;}

DEMO here.

來源

2013-12-17 04:50:42 Hiral

我不知道爲什麼塊元素不會正確居中...... 雖然如果我用第一個div的顯示錶，然後讓按鈕顯示：表格單元它的工作。奇怪的 – op1001

@ op1001因爲它的寬度沒有定義。因此，它需要100％的寬度。沒有留出餘量的空間。 – Hiral

，你必須將顯示器設置爲阻止它的工作

#button { 
    display: block; 
    margin: 0 auto; 
}

來源

2013-12-17 04:49:30 CRABOLO

我有這個..但由於某種原因，它不工作。 – op1001

HTML

<div style="background-color:#0F0; width:100%; height:100px;"> 


       <div style=" width:50%; margin:0 auto;"><a class="btn btn-3 btn-3d icon-cog">Settings</a></div> 

        </div>

CSS

/* General button style (reset) */ 
.btn { 
    border: none; 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    background: none; 
    cursor: pointer; 
    display: inline-block; 
    text-transform: uppercase; 
    font-weight: 700; 
    outline: none; 
    position: relative; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    margin:0; 
} 

.btn:after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 

/* Pseudo elements for icons */ 
.btn:before, 
.icon-heart:after, 
.icon-star:after, 
.icon-plus:after, 
.icon-file:before { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    position: relative; 
    -webkit-font-smoothing: antialiased; 
} 

.icon-envelope:before { 
    content: "\e000"; 
} 

.icon-cart:before { 
    content: "\e007"; 
} 

.icon-cart-2:before { 
    content: "\e008"; 
} 

.icon-heart:before { 
    content: "\e009"; 
} 

/* Filled heart */ 
.icon-heart:after, 
.icon-heart-2:before { 
    content: "\e00a"; 
} 

.icon-star:before { 
    content: "\e00b"; 
} 

/* Filled star */ 
.icon-star:after, 
.icon-star-2:before { 
    content: "\e00c"; 
} 

.icon-arrow-right:before { 
    content: "\e00d"; 
} 

.icon-arrow-left:before { 
    content: "\e003"; 
} 

.icon-truck:before { 
    content: "\e00e"; 
} 

.icon-remove:before { 
    content: "\e00f"; 
} 

.icon-cog:before { 
    content: "\e010"; 
} 

.icon-plus:before, 
.icon-plus:after { 
    content: "\e011"; 
} 

.icon-minus:before { 
    content: "\e012"; 
} 

.bh-icon-smiley:before { 
    content: "\e001"; 
} 

.bh-icon-sad:before { 
    content: "\e002"; 
} 

.icon-file:before { 
    content: "\e004"; 
} 

.icon-remove-2:before { 
    content: "\e005"; 
} 


/* Button 3 */ 
.btn-3 { 
    background: #fcad26; 
    color: #fff; 
} 

.btn-3:hover { 
    background: #f29e0d; 
} 

.btn-3:active { 
    background: #f58500; 
    top: 2px; 
} 

.btn-3:before { 
    position: absolute; 
    height: 100%; 
    left: 0; 
    top: 0; 
    line-height: 3; 
    font-size: 140%; 
    width: 60px; 
} 

/* Button 3d */ 
.btn-3d { 
    padding: 15px 60px 15px 70px; 
} 

.btn-3d:before { 
    background: #fff; 
    color: #fcad26; 
    z-index: 2; 
    line-height:51px; 
} 

.btn-3d:after { 
    width: 20px; 
    height: 20px; 
    background: #fff; 
    z-index: 1; 
    left: 55px; 
    top: 50%; 
    margin: -10px 0 0 -10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.btn-3d:active:before { 
    color: #f58500; 
} 

.btn-3d:active { 
    top: 0; 
} 

.btn-3d:active:after { 
    left: 60px; 
} 


.icon-cog:before { 
font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    content: "\f02d"; 
} 
.center{text-align:center;}

Updated Fiddle of your's

來源

2013-12-17 05:06:00

css不會在div中居中？

回答

相關問題