我怎樣才能在父div的數據中心？

我有一個文本和圖像裏面的div，它是190px x 190px，我希望一切都垂直居中。我怎樣才能在父div的數據中心？

我試過在SO和Google上尋找，似乎找不到一個簡單的答案來這樣做。

這樣做最簡單的方法是什麼？

HTML：

<div class="block"> 
    <h2>TITLE</h2><br/> 
     <img src="...." width="190px"/> 
     <p>Hello world</p> 
</div>

CSS：

.block { 
    position:relative; 
    width:190px; 
    height:190px; 
    background-color:FFF; 
    margin:10px; 
    float:left; 
    left:-10px; 
    text-align: center; 
    padding:10px; 
    border:solid 1px #CCC; 
    font-size:small; 
} 

.block p { 
    text-align: left; 
}

來源

2013-10-30 Dr Robotnik

如果你想一切都爲中心，爲什麼你要將文本對齊到段落的左邊？ –

@Paulie_D - 問題說「垂直」 – Quentin

垂直對齊在HTML中是一個真正的婊子。 –

嗨，你可以使用這個兩個屬性：

.block { 
    display:table-cell; 
    vertical-align:middle; 
}

並取出float:left。查看此演示http://jsfiddle.net/kGt54/17/並詢問任何問題。

編輯

如果你想保持你需要誰漂浮外部容器float:left，並具有裕度：

.blockC { 
    float:left; 
    margin:10px; 
}

新的演示http://jsfiddle.net/kGt54/29/

來源

2013-10-30 12:47:42 DaniP

謝謝。順便說一下'blockC'中的「C」是什麼？我從來沒有見過這樣的事情。 –

這只是爲了命名它：P像塊容器只是我的方式去做 – DaniP

ohhh我現在看到，我沒有意識到你已經在HTML中創建了一個新的容器:) –

-1

.block { 
     position:relative; 
     background-color:FFF; 
     margin:10px; 
     float:left; 
     left:-10px; 
     text-align: center; 
     padding:10px; 
     border:solid 1px #CCC; 
     font-size:small; 
    } 

    .block p { 
     text-align: center; 
    }

只是刪除在.block{}的width:190px;和height:190px;和.blick p{}只是改變text-align : left;到text-align : center;我希望多數民衆贊成你想達到..快樂編碼。

來源

2013-10-30 12:45:35 CENT1PEDE

它不是垂直 – DaniP

我需要垂直對齊，而不是水平。 –

你在吸菸？ –

我怎樣才能在父div的數據中心？

回答

相關問題