EC-CUBE：2.4K

商品詳細ページのメイン画像ですが、画面の大きいiPhone6やAndroid端末で見ると左寄せになってしまいます。中央寄せにするにはどのように記述すればよろしいでしょうか？初心者のためわからず、どなたか教えていただけたら幸いです。

------------------------------------------- ソース部分 ---------------------------------------------

<div id="detailphotoblock">
<!--{assign var=key value="main_image"}-->
<!--{if $arrProduct.main_large_image != ""}-->
<!-- 商品写真 -->
<!--{*<a href="java script:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+110}-->', '<!--{$arrFile.main_large_image.height+60}-->'))">*}-->
<img id="mainimage" src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{*</a>*}-->
<!--{else}-->
<img id="mainimage" src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{/if}-->
<div id="control-arrow">
<div id="detail-prev" onclick="arrow.prev(); return false;">
<img src="<!--{$TPL_DIR}-->img/products/detail-prev.gif">
</div>
<!--{* 詳細メインコメント *}-->
<!--{if $arrProduct.main_comment}-->
<div id="detail-comment"><!--{$arrProduct.main_comment|nl2br_html}--></div>
<!--{/if}-->
<div id="detail-next" onclick="arrow.next(); return false;">
<img src="<!--{$TPL_DIR}-->img/products/detail-next.gif">
</div>
</div>
</div>

画像を表示する部分を
<center>〜</center>で囲ってもダメでしょうか。

<!-- 商品写真 -->
<center>
<!--{*<a href="java script:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+110}-->', '<!--{$arrFile.main_large_image.height+60}-->'))">*}-->
<img id="mainimage" src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
<!--{*</a>*}-->
</center>

<!--{else}-->

<center>
<img id="mainimage" src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" />
</center>


または、imgタグに、styleを指定してみてください。

（例）
<img id="mainimage" src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" style="margin:0 auto;" />


これでダメでしたら、<div id="detailphotoblock">のCSSを変更してみたらどうでしょうか。

優先させたい部分に!important;にすると上手くいく場合があります。

(例）margin:0 auto!important;

参考になれば良いのですが。。。

＞digipokeさん

ご丁寧な説明ありがとうございます！
いただいた内容で試してみます。
また結果を報告させていただければと思いますので、よろしくお願いします。