CODEWITHSUNDEEP
htmlcssjquery-mobile
neeraj
neeraj

Reputation: 223

How to place div at the center of browser

something like in the image I'm working on mobile app. I'm trying to align an image outside the div, but couldnt. pls help me , thanks in advance . this is what i tried 

<div id="page1" data-role="page">
<div data-role="header" data-position='fixed'>
     <h1>Center table</h1>

</div>
<div data-role="content">
    <div class="centeredTable">
        <table>
            <tr>
                <td>
                    <img src="http://lorempixel.com/26/26/food/1/" ; />
                </td>
                <td><a href="#" class="ui-btn ui-corner-all custom-btn ui-shadow ui-mini">sunday</a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div> <img src="http://lorempixel.com/26/26/food/1/" ; /></div>


div.centeredTable {
margin: 0 auto;
width: 400px;
background-color: #bbb
  }
.centeredTable table {
width: 100%;
 }
 .centeredTable td {
vertical-align: middle;
text-align: center;
 }
.centeredTable tr td:first-child {
width: 20%;
 }
 .centeredTable tr td:last-child {
width: 80%;
}

I have another image which i want to fit outside the div, which i'm not able to. if i do so, div will be no more at the center

Upvotes: 1

Views: 55

Answers (1)

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

Add class to imgs parent, for example centeredImage:

<div class="centeredImage">
   <img src="http://lorempixel.com/26/26/food/1/" ; />
</div>

Then add CSS style:

.centeredImage {
   text-align: center;
}

Here is DEMO

Upvotes: 4

Related Questions