CODEWITHSUNDEEP
htmlcss
Kin
Kin

Reputation: 4596

How to properly align elements in center?

I have simple grid, created with 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/

So how to center text inside squares and squares inside parent div?

enter image description here

Upvotes: 2

Views: 190

Answers (5)

Sowmya
Sowmya

Reputation: 26969

Add display:table & margin:0 auto to row div and display:table-cell to get the text vertically middle

#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

Upvotes: 2

Ankur
Ankur

Reputation: 48

Adding paddig will dot the work for you. Try this edited code. Here I have edited padding in the videowall-grid and also in the .square also

<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>

Upvotes: 0

Uttam Kadam
Uttam Kadam

Reputation: 458

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

modify this div like above

Upvotes: 0

George
George

Reputation: 36786

Add the text-align:center; style to #videowall-grid:

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

text-align can be used to align any inline elements. Since you set your .squares to inline-block they react to this style.

Check this JSFiddle Update

P.S. The text is centered inside their squares in your JSfiddle.

Upvotes: 1

Muhammad Bilal
Muhammad Bilal

Reputation: 449

Add text-align: center; in #videowall-grid it will solve your problem.

DEMO

Upvotes: 1

Related Questions