將div對齊到頁面中心

我意識到這個問題在SO上是重複的。但是所有這些解決方案以及我一直用來實現的解決方案都是失敗的。我爲此道歉。將div對齊到頁面中心

我的HTML代碼至今：

<div class="arrow"> 
    <hr class="left"> 
    <img src="http://bit.ly/100X8XQ" height="10" width="10"> 
    <hr class="right"> 
<div>

CSS：

.arrow{ 
margin:0 auto; 
} 

.left{ 
float: left; 
width: 30%; 
} 

img{ 
float: left; 
} 

.right{ 
float: left; 
width: 30%;  
}

我要對齊的DIV 「箭頭」包含所有HR的和IMG頁面的中心。

margin:0 auto;

這也幫不了我。我怎樣才能做到這一點？任何幫助深表感謝。

來源

2014-10-31 user3861559

'保證金：0汽車;'將如果你工作將上面的html包裝在寬度爲 – Parody 2014-10-31 01:06:06

的父'div'中必須用text-align：center包裝在容器中。也應該有寬度 - 否則它將是100％ – galchen 2014-10-31 01:06:30

包裹.arrow DIV一些容器具有text-align: center;

<div class="container"> 
    <div class="arrow"> 
    <hr class="left"> 
    <img src="http://bit.ly/100X8XQ" height="10" width="10"> 
    <hr class="right"> 
    <div> 
</div> 


.container { 
    text-align: center; 
} 
.arrow { 
    width: 800px; 
    margin: 0 auto; 
}

來源

2014-10-31 01:08:16 galchen

試試這個：

.arrow { 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
display: block; 
margin: auto; 
vertical-align: middle; 
background-color: red; 
width: 200px; 
height: 200px; 
}

編輯第一個應該現在的工作。測試。

來源

2014-10-31 01:06:53 FortMauris

喜歡這個

.arrow{ 
    width: 50%; 
    margin:0 auto; 
}

檢查這個範例：http://jsfiddle.net/4kk6wc39/

來源

2014-10-31 01:10:46

將div對齊到頁面中心

回答

相關問題