Centrer un Allopass

Question

stevefigueras

17 Jun 2010 à 19:48

Bonjour je n'arrive pas à centrer horizontalement et verticalement un script AlloPass alors que le contenu de ma Div Inner se centre sans souci.

<body onload="iPhoneAlert ();">
<div id="outer">
	<div id="container">
		<div id="inner">

<p><div style="width:300px;font-family:Arial,Helvetica,sans-serif;font-size:10px;background-color:#ffffff;color:#000">

 <div style="height:25px;text-align:center">
  <img src="http://payment.allopass.com/imgweb/script/fr_uk/acces_title.jpg" width="300" height="25" alt="Logo" />
 </div>

 <div style="height:137px;text-align:center">
  <img name="acces_top" src="http://payment.allopass.com/acte/scripts/popup/top.apu?ids=220576&amp;idd=871488&amp;lang=fr" width="300" height="137" alt="" />
 </div>

 <div style="width:300px;text-align:right">
  <img src="http://payment.allopass.com/imgweb/script/fr_uk/acces_left.jpg" width="79" height="29" alt="" style="float:left" />
  <a href="javascript:;" onclick="javascript:window.open('http://payment.allopass.com/acte/scripts/popup/access.apu?ids=220576&amp;idd=871488&amp;lang=fr&amp;country=fr','phone','toolbar=0,location=0,directories=0,status=0,scrollbars=0,resizable=0,copyhistory=0,menuBar=0,width=300,height=340');"><img border="0" src="http://payment.allopass.com/imgweb/common/flag_fr.gif" width="35" height="29" alt="FR" title="FR" /></a>
 </div>

 <form name="APform" action="http://payment.allopass.com/acte/access.apu" method="post" style="text-align:center;clear:both">
<input type="hidden" id="ids" name="ids" value="220576" />
<input type="hidden" id="idd" name="idd" value="871488" />
<input type="hidden" id="lang" name="lang" value="fr" />

  <strong>Entrez votre code d'accès - <br />Enter your access code</strong><br /><br />
  <input type="text" size="8" maxlength="10" value="" name="code[]" style="background-color:#e7e7e7;border:#000080 1px solid;color:#000080;cursor:text;font-family:Arial;font-size:10pt;font-weight:bold;letter-spacing:normal;width:70px;text-align:center;" />
  <br /><br />
  <input type="button" name="APsub" value="" onclick="this.form.submit();this.form.APsub.disabled=true;" style="border:0px;margin:0px;padding:0px;width:48px;height:18px;background:url('http://payment.allopass.com/imgweb/common/bt_ok.gif');" /><br />
 </form>
 Pour connaître notre solution de micro paiement :
 <a href="http://fr.allopass.com/" target="_blank">Allopass</a>
</div></p>
		</div>
	</div>

</div>
</body>

Voici le Style

/* -- Page styling, unrelated to centering ----- */
body {
     margin: 0; /* to avoid margins */
     text-align: center; /* to correct the centering IE bug*/
	 background:#FFFFFF
}
#flashcontent {
     margin-left: auto;
     margin-right: auto;
     width: 1000px;    /* you must change this number to the width of your flash movie in pixels */
     text-align: left; /* to realign your text */
	 }
	 
/* -- Code for vertical centering ----- */

* {
	margin: 0;
	padding: 0;
}

/* macs won't see this! \*/
html, body { 
     height:100%;
     width:100%;
}
/* END mac */

#outer {
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#container {
	display:table-cell;
	vertical-align:middle;
}

#inner {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	vertical-align:middle;
}
</style> 

<!--[if IE ]>
   <style type="text/css">
	#container {
   height: 1px; /* required for IE to properly center vertically */
   position:relative;
   top:50%
}

#inner {
   position:relative;
   top:-50%;
}
   </style>
<![endif]-->

Merci de votre aide à tous ! Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Centrer un Allopass