如何正確對齊中心的元素？

Question

我有使用css創建的簡單grid

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
}

 #videowall-grid .square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 70px;
    display: inline-block;
    text-align: center;

    <div id="videowall-grid" style="display: block;"><div class="row">
<div id="1_1" class="square">8</div><div id="1_2" class="square">373</div><div id="1_3" class="square">1</div><div id="1_4" class="square">111</div></div><div class="row">
<div id="2_1" class="square">318</div><div id="2_2" class="square">319</div><div id="2_3" class="square">321</div><div id="2_4" class="square">button</div></div><div class="row">
<div id="3_1" class="square">234</div><div id="3_2" class="square">button</div><div id="3_3" class="square">button</div><div id="3_4" class="square">button</div></div></div>

http://jsfiddle.net/nonamez/upHjg/

那么如何將文本center放置在正方形和父div內部的正方形中呢？

Answer 1

將display:table ＆ margin:0 auto到div行， 並 display:table-cell以使文本垂直居中

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 0 auto;
    padding: 5px; text-align:center
}
#row{display:table;  margin:0 auto}
 #videowall-grid .square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 70px;
    display:table-cell;
    text-align: center;
    vertical-align:middle
}​

現場演示

Answer 2

添加text-align: center; 在#videowall-grid ，它將解決您的問題。

DEMO

Answer 3

添加text-align:center; #videowall-grid樣式：

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
}

text-align可用於對齊任何inline元素。 由於您將.square設置為inline-block因此它們會對此樣式做出反應。

檢查此JSFiddle更新

PS文本就是他們在你的jsfiddle廣場的正中央。

Answer 4

 <div id="videowall-grid" style="display: block;" align="center">

像上面一樣修改這個div

Answer 5

添加paddig將為您完成工作。 試試這個編輯后的代碼。 在這里，我在videowall-grid和.square中也編輯了padding

<style type="text/css">
#videowall-grid{
    width:550px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px 5px 5px 150px;

}

 #videowall-grid .square{
    padding: 30px 5px 5px 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 45px;
    display: inline-block;
    text-align: center;
}
</style>
<div id="videowall-grid" style="display: block;"><div class="row">
<div id="1_1" class="square">8</div><div id="1_2" class="square">373</div><div id="1_3" class="square">1</div><div id="1_4" class="square">111</div></div><div class="row">
<div id="2_1" class="square">318</div><div id="2_2" class="square">319</div><div id="2_3" class="square">321</div><div id="2_4" class="square">button</div></div><div class="row">
<div id="3_1" class="square">234</div><div id="3_2" class="square">button</div><div id="3_3" class="square">button</div><div id="3_4" class="square">button</div></div></div>