我使用grid
css
#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
内的正方形和正方形内的文字?
答案 0 :(得分:2)
添加display:table
&amp; 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
}
<强> LIVE DEMO 强>
答案 1 :(得分:1)
在text-align: center;
中添加#videowall-grid
,它将解决您的问题。
答案 2 :(得分:1)
将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
,因此他们会对此风格做出反应。
P.S。文本 位于JSfiddle中的方块内。
答案 3 :(得分:0)
<div id="videowall-grid" style="display: block;" align="center">
像上面一样修改这个div
答案 4 :(得分:0)
<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>