CODEWITHSUNDEEP
htmlioscss
DA-G-GURU
DA-G-GURU

Reputation: 141

Have an image be centered on mobile page view

I am using a site built in mobile wrap for scroll for an area I call rafters shown on this page here.

Website URL

http://www51.myfantasyleague.com/2017/options?L=24837&F=0001&O=01

Code in use.

 <table style="table-layout:fixed;">   <tbody>
    <tr>
      <td class="mobile-view" style="vertical-align:top;">
        <div class="mobile-wrap">
         <center><img src="http://dagrafixdesigns.com/Images/2008/DA_2017/zWB_17/IRONMEN_MINI.png" /> </center> 
        </div>
      </td>
    </tr>   </tbody> </table>

STYLE SHEET

@media only screen and (max-width:48.000em){
 div.mobile-wrap > center > img {
     margin:0 auto 0px -296px;
  }
}


You will see on desktop and maybe ipad view it looks nice and centered.

I am trying to achieve on iPhone view the banner to be centered when the page loads, I have it this way by added the media query -296px, however scroll this image and now look at the top dark bar, it is short on one side and very long on other site, because of this -296px..

Is there anyway to get this graphic to load center on all devices properly, while swiping left or right will have the same equal results on either side of the graphic? Not like I have it now with the -296 value.?

Maybe some more inline html code for the img scr? I have center tags there and it works nice for desktop view as it is on center.

thx

Upvotes: 1

Views: 1995

Answers (1)

zork media
zork media

Reputation: 972

You don't need a <center> or media-queries for this. To have an image centered in its container, give it a padding-left: 50%; and a negative margin-left of the half of its width:

.mobile-wrap {
  overflow: hidden;
}
img {  
  padding-left: 50%;
  margin-left: -425px; /* pixel value has to be half of the image width */
}
<div class="mobile-wrap">
   <img src="http://dagrafixdesigns.com/Images/2008/DA_2017/zWB_17/IRONMEN_MINI.png" /> 
</div>

Upvotes: 1

Related Questions