2

我有简单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在 parent 内的正方形和正方形内输入文本div？

在此处输入图像描述

4

5 回答 5

2

将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
}​

现场演示

于 2012-12-13T11:37:27.783 回答
1

添加它会解决你的问题text-align: center;。#videowall-grid

演示

于 2012-12-13T11:30:05.620 回答
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元素。由于您将.squares 设置为inline-block他们对这种风格的反应。

检查这个JSFiddle 更新

PS 文本在您的 JSfiddle 中的正方形内居中。

于 2012-12-13T11:30:11.730 回答
0 
 <div id="videowall-grid" style="display: block;" align="center">

像上面一样修改这个div

于 2012-12-13T11:31:11.360 回答
0

添加 paddig 将为您完成工作。试试这个编辑过的代码。在这里，我在 videowall-grid 和 .square 中编辑了填充

<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>
于 2012-12-13T11:34:26.710 回答