如何居中水平

我使用的字體真棒庫的絕對股利內容。我想把水平居中箭頭圖標。並且DIV必須是絕對的位置。如何居中水平

我用這個代碼，但它不工作。

.arrow { 
    left: 0; 
    right: 0; 
}

JSFiddle Demo

來源

2014-09-05 MehmetDemiray

請在問題本身*你的代碼*。的 – gvee 2014-09-05 10:51:24

可能重複[如何垂直居中一個div所有的瀏覽器？（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – gvee 2014-09-05 10:52:15

移動'左：0;正確：0;'對絕對定位的父div。 – 2014-09-05 10:53:02

使用width:100%絕對div

.home .center { 
    position: absolute; 
    bottom: 0; 
    top:30px; 
    text-align: center; 
    width:100%; 
}

更新fiddle

來源

2014-09-05 10:54:08

我只是忘了「寬度：100％」。非常感謝你:) – MehmetDemiray 2014-09-05 12:14:06

很酷，在這裏完成.. – 2014-09-05 12:21:03

試試這個：

HTML代碼：

<div class="home"> 
    <div class="center"> 
    <a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a> 
    </div> 
</div>

CSS代碼：

.home { 
    margin: 0 auto; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    max-width: 960px; 
} 

.home .center { 
    position: absolute; 
    bottom: 0; 
    top:30px; 
    text-align: center; 
} 

.arrow {  
}

來源

2014-09-05 10:56:27

'position：fix;'哈？？！我想你的意思是'固定'。 – 2014-09-05 10:57:21

。家是相對的。它必須絕對定位。我解決了問題。謝謝：） – MehmetDemiray 2014-09-05 12:09:08

這應該工作，試試吧。

.home { 
    margin: 0 auto; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    margin: 0 auto; 
    max-width: 960px; 
} 

.center { 
    position: relative; 
    bottom: 0; 
    top:30px; 
    text-align: center; 
} 
.arrow 
    left: 0; 
    right: 0;

至於爲什麼它的工作原理的解釋：很好，包裝DIV必須是絕對的，其含量必須是相對於定位是什麼包裝裏面，你please.In這種方式，會更容易如果你要添加的另一個相對的div

來源

2014-09-05 10:57:47 Memphistoles

這裏工作的例子。您可以刪除.arrow CSS規則，因爲它什麼都不做。

.home { 
    margin: 0 auto; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    max-width: 960px; 
} 

.home .center { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    top:30px; 
    text-align: center; 
}

來源

2014-09-05 10:58:03 David

我剛剛更改爲您的CSS，它工作正常。

.home { 
    margin: 0 auto; 
} 

.home .center { 
    margin: 0 auto; 
    text-align: center; 
} 
.arrow 
    margin: 0 auto;  
}

乾杯！

來源

2014-09-05 11:00:06

如何居中水平

回答

相關問題