Q&A
###html どうしても中央揃えにならない(illustratorからの書き出し)
illustratorで書き出した画像を初めてのポートフォリオとして使用する（外部公開なし）のですがどうしても画像が左寄せされてしまいます。
他に何か中央揃えにする方法はないでしょうか。
ある程度は試したのですが、どうしても左によります。
###該当のソースコード
html
1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<title>page1</title> 5<script type="text/javascript"> 6<!-- 7function MM_preloadImages() { //v3.0 8 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 9 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 10 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 11} 12function MM_swapImgRestore() { //v3.0 13 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 14} 15 16function MM_findObj(n, d) { //v4.01 17 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 18 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 19 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 20 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 21 if(!x && d.getElementById) x=d.getElementById(n); return x; 22} 23 24function MM_swapImage() { //v3.0 25 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 26 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 27} 28//--> 29</script> 30</head> 31<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 32<div align="center"> 33<div style="position:absolute; left:0px; top:0px; width:800px; height:600px;"> 34 <!-- リンクindex1.html --> 35 <a href="index.html"> 36 <div class="1" style="background-image:url(../images/page1_01.png); position:absolute; left:0px; top:0px; width:192px; height:37px;" title=""> 37 </div> 38 </a> 39 40 <div class="2" style="background-image:url(../images/page1_02.png); position:absolute; left:192px; top:0px; width:608px; height:37px;" title=""> 41 </div> 42 <div class="3" style="background-image:url(../images/page1_03.png); position:absolute; left:0px; top:37px; width:800px; height:183px;" title=""> 43 </div> 44 <div class="4" style="background-image:url(../images/page1_04.png); position:absolute; left:0px; top:220px; width:30px; height:105px;" title=""> 45 </div> 46 47 <!-- リンクselfintro.html --> 48 <a href="selfintro.html"> 49 <div class="5" style="background-image:url(../images/page1_05.png); position:absolute; left:30px; top:220px; width:70px; height:105px;" title=""> 50 </div> 51 </a> 52 53 <div class="6" style="background-image:url(../images/page1_06.png); position:absolute; left:100px; top:220px; width:596px; height:105px;" title=""> 54 </div> 55 56 <!-- リンクpage2.html --> 57 <a href="page2.html"> 58 <div class="7" style="background-image:url(../images/page1_07.png); position:absolute; left:696px; top:220px; width:71px; height:105px;" title=""> 59 </div> 60 </a> 61 62 <div class="8" style="background-image:url(../images/page1_08.png); position:absolute; left:767px; top:220px; width:33px; height:105px;" title=""> 63 </div> 64 <div class="9" style="background-image:url(../images/page1_09.png); position:absolute; left:0px; top:325px; width:800px; height:275px;" title=""> 65 </div> 66</div> 67</div> 68</body> 69</html>
汚いソースかもしれませんが、なにとぞよろしくお願いいたします。
ソースでは想像つきにくいと思いますので
回答2件
0
ベストアンサー
これがあるとどうしても無理だと思います。
html
1<div style="position:absolute; left:0px; top:0px; width:800px; height:600px;">
html
1<div style="margin:0 auto; width:800px; height:600px;">
こうするといいかと。
あとcenterタグもdivのalign="center"も廃止や非推奨だったと思います。
#追記
中の要素がabsoluteしてるのでposition:relative;したほうがいいかもしれません。
html
1<div style="position:relative; margin:0 auto; width:800px; height:600px;">
投稿2018/01/23 08:42
編集2018/01/23 08:55
総合スコア3828
0
ページ全体を画像で出力してセンタリングするほうが早いと思います。
投稿2018/01/23 09:06
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。