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では、親の内側の四角形と四角形の中にテキストを入れる方法はdiv?

ここに画像の説明を入力

4

5 に答える 5

2

行 div に & を追加display:tableし、テキストを垂直方向に中央に取得しますmargin:0 auto 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要素を整列するために使用できます。あなたが を に設定したので.square、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 に答える