Foros del Web » Creando para Internet » CSS »

no puedo centrar una imagen

Estas en el tema de no puedo centrar una imagen en el foro de CSS en Foros del Web. hola amigo, llevo todo el dia tratando de centrar la imagen del mapa de alemania y no puedo. es un area chape, pero deberia poderse ...
  #1 (permalink)  
Antiguo 23/10/2014, 11:35
 
Fecha de Ingreso: abril-2014
Mensajes: 19
Antigüedad: 9 años, 11 meses
Puntos: 0
no puedo centrar una imagen

hola amigo, llevo todo el dia tratando de centrar la imagen del mapa de alemania y no puedo.
es un area chape, pero deberia poderse centrar me imagino
saludos
Código HTML:
<div id="container">
<div id="containermap">
	<img src="http://www.viessmann-kaeltetechnik.de/de-wAssets/img/images/map2.png" usemap="#Map" border="0" >
	<map name="Map" >
		<area shape="rect" coords="165,194,181,211" id="88888" style="z-index:999" />
		<area shape="rect" coords="78,112,87,121" id="77777" style="z-index:997" />
		<area shape="rect" coords="118,263,127,273" id="66666" style="z-index:998"/>

		<area shape="poly" coords="146,21,146,31,144,32,141,34,139,34,138,38,139,40,142,40,144,38,151,38,152,40,156,41,158,40,159,37,161,39,165,39,169,39,170,43,170,48,167,49,164,49,160,52,158,55,160,56,165,58,168,60,168,63,170,65,174,66,174,68,167,67,167,71,164,70,157,71,154,72,156,73,160,74,162,72,166,74,171,74,168,78,163,80,157,81,152,80,149,81,146,82,144,85,137,89,134,89,134,87,131,87,130,88,128,87,126,83,124,83,122,84,119,85,118,84,117,89,115,93,113,98,107,95,104,91,104,87,106,81,107,79,110,79,111,77,111,73,111,72,108,71,108,68,111,66,114,65,116,61,115,58,109,58,107,56,106,53,104,49,100,45,98,43,90,43,88,41,87,37,91,37,90,35,88,33,86,30,90,26,86,26,84,26,83,27,81,27,81,24,84,22,88,21,91,20,91,18,89,14,84,9,82,5,81,0,85,0,91,1,97,4,101,4,101,7,104,6,106,2,109,4,113,6,116,5,118,8,116,11,118,11,118,13,116,17,115,19,119,18,122,19,122,21,126,20,129,21,133,23,135,25,138,25,141,24,142,22,143,22" id="21441"  />

<area shape="poly" coords="11,128,18,132,24,133,28,134,32,134,33,139,35,140,33,142,34,143,37,146,39,151,39,155,39,162,39,168,36,170,31,173,28,174,27,175,23,175,21,178,18,183,15,184,14,187,10,187,10,183,10,181,8,178,5,175,5,172,6,172,6,167,4,166,3,164,3,163,9,159,9,155,12,150,12,144,10,141,10,137,8,136,6,131,7,130" id="50259" />

		<area shape="poly" coords="112,73,108,71,107,67,115,65,115,62,115,58,111,58,106,56,104,56,101,53,95,48,90,47,85,46,78,49,76,52,78,57,78,60,76,57,73,56,70,56,69,58,72,60,72,62,69,63,66,61,67,60,67,57,66,54,63,49,56,51,51,52,43,54,35,57,29,61,27,66,29,69,32,70,32,78,31,79,31,88,23,89,23,90,24,92,23,92,23,96,28,99,32,99,32,94,35,96,36,102,35,109,37,113,42,120,47,124,54,123,57,119,60,120,61,121,66,122,70,120,73,119,76,118,76,105,71,100,76,100,78,99,83,99,85,100,88,100,87,95,91,93,93,92,93,85,100,90,104,92,104,86,105,83,107,78,109,80,110,80,112,77" id="27476"   />


	

	

		<area shape="poly" coords="208,100,213,99,219,100,220,101,225,100,226,99,229,99,230,100,236,100,236,98,238,103,241,103,241,102,244,102,244,105,247,106,248,112,250,115,250,120,248,123,247,127,251,129,252,138,256,139,258,142,261,147,261,153,260,158,258,163,256,167,252,167,251,163,249,160,245,159,240,159,241,162,244,163,244,165,241,166,238,168,232,170,231,172,222,173,221,175,220,177,217,178,212,182,210,185,207,184,204,189,201,187,198,188,193,190,189,193,187,199,184,195,183,193,178,193,175,189,175,185,173,185,176,182,180,174,181,166,184,165,184,160,182,157,181,152,178,151,175,148,175,147,179,146,182,146,182,145,182,142,183,141,186,137,190,137,194,132,194,128,200,127,201,125,201,121,197,121,192,118,196,117,198,116,203,116,202,112,206,108,208,105" id="09484"   />

		<area shape="poly" coords="41,154,39,158,39,165,40,167,39,169,33,172,27,174,26,176,23,177,19,180,18,183,15,184,15,187,15,194,13,196,9,200,8,206,8,210,12,215,14,216,18,216,18,221,15,225,13,229,23,228,28,226,30,224,30,222,32,221,33,223,35,224,37,223,37,220,40,219,41,216,46,216,47,211,44,208,43,204,42,203,42,200,44,200,44,197,43,197,43,195,46,192,48,191,50,192,51,193,53,193,53,189,56,183,60,183,60,178,60,174,57,168,55,168,54,164,53,163,49,162,46,159,45,157,43,156,42,154" id="44444" />

		<area shape="poly" coords="104,138,100,144,97,148,94,147,93,145,86,142,82,147,77,152,77,154,79,155,79,157,77,158,73,157,71,158,72,160,70,162,64,164,63,161,62,162,61,165,57,169,59,176,60,180,60,182,55,183,54,187,53,192,51,192,49,191,47,191,43,194,43,197,44,198,44,199,41,200,42,203,43,205,44,208,46,212,50,211,53,212,59,223,61,223,62,221,67,221,69,222,69,227,79,227,80,226,82,226,88,232,91,233,94,231,94,228,98,227,99,225,103,224,103,222,101,220,108,220,111,218,117,215,120,212,121,207,114,207,114,204,110,200,110,198,111,197,113,192,117,191,121,188,121,180,119,180,118,175,120,173,121,170,121,166,126,166,126,164,123,161,126,160,126,158,117,152,117,148,111,149,111,152" id="35638"  />

		

		<area shape="poly" coords="79,303,78,298,81,296,80,293,80,291,83,289,83,286,81,281,83,279,85,275,84,271,90,270,95,270,96,267,94,266,94,264,100,262,107,261,109,262,112,260,113,257,111,255,112,253,114,253,116,255,120,253,121,251,128,249,132,252,134,252,137,251,140,251,141,253,144,255,149,256,151,259,151,266,161,274,158,275,157,278,155,281,153,285,151,286,149,284,148,285,146,288,146,291,146,294,145,296,145,301,145,306,146,308,149,308,150,309,149,312,148,314,144,315,142,313,140,313,138,314,137,314,135,312,135,321,132,323,130,325,127,325,127,323,128,323,128,320,125,321,124,318,121,316,120,314,117,314,116,312,114,313,113,315,113,316,104,316,103,313,97,310,92,306,90,306,90,309,87,309,86,307,84,305,83,305" id="87700" />

		<area shape="poly" coords="218,244,213,244,210,242,206,243,205,244,201,245,195,246,194,248,193,253,192,256,188,257,184,260,183,254,180,253,177,252,177,250,174,250,169,250,168,252,167,251,167,248,163,248,162,250,159,250,157,249,155,252,151,255,149,259,150,266,158,273,158,275,156,280,154,284,151,285,150,284,148,284,147,287,145,288,145,292,146,293,145,298,145,301,144,306,145,307,148,308,150,310,149,312,149,313,151,317,152,320,156,320,161,319,164,317,164,315,168,315,173,311,181,311,182,310,188,309,188,308,187,307,188,305,191,305,196,305,196,307,198,308,200,308,201,307,203,306,206,306,206,308,206,310,208,312,211,313,214,313,215,311,215,304,211,304,211,302,211,300,212,297,211,296,208,293,206,289,205,287,206,285,208,284,212,281,216,280,222,278,224,275,225,268,227,266,229,267,232,268,234,267,235,265,235,259,234,255,230,252,228,249,225,249,222,250,220,244" id="85244" />

		<area shape="poly" coords="178,193,176,190,166,192,162,190,161,186,158,186,157,187,149,187,146,186,136,185,136,190,134,192,132,192,131,190,126,191,121,188,119,191,116,192,112,192,112,195,110,198,110,199,112,202,114,206,115,208,121,208,120,210,118,213,110,217,110,222,113,223,115,221,116,225,116,228,118,229,119,231,121,231,122,229,124,229,123,233,124,237,124,242,125,244,127,245,127,249,131,251,132,253,134,253,137,251,140,251,141,255,143,256,145,256,150,258,154,253,156,251,157,249,158,249,159,250,162,250,162,248,166,248,167,251,169,252,172,251,178,251,178,252,182,252,185,255,185,260,187,258,188,256,192,256,194,253,193,250,195,247,199,245,206,244,209,242,212,244,214,243,215,241,208,235,203,234,201,232,197,225,194,221,190,218,193,214,194,211,193,210,189,206,186,205,183,199,180,196" id="95030" />

	</map>
	</div>
<div style="margin:0 auto">
<div id="table">
	<div id="stateInfo">
    
		<table width="100%" border="0" cellspacing="0">
			<tr>
				<td style="padding-right: 1%"><img src="images/logo.jpg" width="52"
					height="147" /></td>
				<td style="padding: 1em;">
					<p id="name" style="font-weight: bolder">Viessmann Kältetechnik GmbH</p>
					<p id="info1">Firmenzentrale Hof</p>
					<p id="info2"></p>
					<p id="info3"></p>
                    <br>
					<p>Adresse: <span id="address">Schleizer Strasse 100</span></p>
					<p id="zipCity">95030 - Hof/Saale</p>
					<p>Tel. <span id="tel">0 92 81/8 14-0</span></p>
					<p>Fax. <span id="fax">0 92 81/8 14-269</span></p>
					<p>E-mail: <span id="mail">[email protected]</span></p>
					<p id="web">www.viessmann-kaeltetechnik.de</p>
				</td>
			</tr>
		</table>
	</div></div>
 
    <div id="searchzip">
		<table width="100%" border="0" cellspacing="0" id="references">
			<tr>
			  <td>Suche nach PLZ:<br>
                <input name="zipInput" id="zipInput"
					type="text" size="20" maxlength="5" />
                <br>
                <br>
                
                <p><img src="images/block2.png"  /> Firmenzentrale Hof</p>
              <p><img src="images/block.jpg"  /> Verkausburo</p></td>
              <br>
		  </tr></table>
          
          <table width="100%" border="0" cellspacing="0">
			<tr>
             <td><p><a id="contactLink" href="#"><img src="images/mail.jpg"></a> E-mail schreiben</p></td></tr>
			<tr ><td id="references2" ><p ><a id="vcard" href="#"><img src="images/vcard.png"></a> Vcard Download</p></td>
               
				
			</tr>
		</table>
	</div></div></div> 
Código:
p {
	font-size: 12px;
	line-height: 7px;
}
#container{width: 600px; margin: 0 auto; cursor:pointer;}
#containermap{
	background-color: #efefef;
	text-align: center!important;
	padding: 1em;
	margin: 0 auto!important;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;}
	
#center{text-align:center; margin:0 auto;
	
}
#stateInfo {
	width: 350px;
	margin: 10px auto;
	-moz-box-shadow: 10px 10px 11px #c7c6c7;
	-webkit-box-shadow: 10px 10px 11px #c7c6c7;
	box-shadow: 10px 10px 11px #c7c6c7;
	border: solid 1px #c7c6c7;
	
}
#table{float:left;}
#desciption{float:right;}
#contact{float:right;
text-align:right;
margin-top:20%;}

#references{background-color: #efefef;
	float: right;
	margin-top:-7px;
	padding: 1em;
		}
#suche{align:right;}




#searchzip {
	
	float: right;
			
}
#searchzip img{vertical-align:middle;}
@media only screen and (max-width: 340px) and (min-width: 5px)  { 
#container{width: 300px; }
  

#stateInfo {width:300px;}

#contact{float:none;margin-top:50%; text-align:center; margin-right:20%;line-height:13px;}

#suche{margin-left:-50px;}
#searchzip {float:none; width:300px; text-align:center;}
#table{float:none;}
}
  #2 (permalink)  
Antiguo 23/10/2014, 15:41
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 7 meses
Puntos: 401
Respuesta: no puedo centrar una imagen

Prueba.

Código HTML:
Ver original
  1. <div id="container">
  2.       <div style="text-align: center;" id="containermap"> <img src="http://www.viessmann-kaeltetechnik.de/de-wAssets/img/images/map2.png"
  3.          usemap="#Map" border="0"> <map name="Map">
  4.           <area shape="rect" coords="165,194,181,211" id="88888" style="z-index:999">
  5.           <area shape="rect" coords="78,112,87,121" id="77777" style="z-index:997">
  6.           <area shape="rect" coords="118,263,127,273" id="66666" style="z-index:998">
  7.           <area shape="poly" coords="146,21,146,31,144,32,141,34,139,34,138,38,139,40,142,40,144,38,151,38,152,40,156,41,158,40,159,37,161,39,165,39,169,39,170,43,170,48,167,49,164,49,160,52,158,55,160,56,165,58,168,60,168,63,170,65,174,66,174,68,167,67,167,71,164,70,157,71,154,72,156,73,160,74,162,72,166,74,171,74,168,78,163,80,157,81,152,80,149,81,146,82,144,85,137,89,134,89,134,87,131,87,130,88,128,87,126,83,124,83,122,84,119,85,118,84,117,89,115,93,113,98,107,95,104,91,104,87,106,81,107,79,110,79,111,77,111,73,111,72,108,71,108,68,111,66,114,65,116,61,115,58,109,58,107,56,106,53,104,49,100,45,98,43,90,43,88,41,87,37,91,37,90,35,88,33,86,30,90,26,86,26,84,26,83,27,81,27,81,24,84,22,88,21,91,20,91,18,89,14,84,9,82,5,81,0,85,0,91,1,97,4,101,4,101,7,104,6,106,2,109,4,113,6,116,5,118,8,116,11,118,11,118,13,116,17,115,19,119,18,122,19,122,21,126,20,129,21,133,23,135,25,138,25,141,24,142,22,143,22"
  8.            id="21441">
  9.           <area shape="poly" coords="11,128,18,132,24,133,28,134,32,134,33,139,35,140,33,142,34,143,37,146,39,151,39,155,39,162,39,168,36,170,31,173,28,174,27,175,23,175,21,178,18,183,15,184,14,187,10,187,10,183,10,181,8,178,5,175,5,172,6,172,6,167,4,166,3,164,3,163,9,159,9,155,12,150,12,144,10,141,10,137,8,136,6,131,7,130"
  10.            id="50259">
  11.           <area shape="poly" coords="112,73,108,71,107,67,115,65,115,62,115,58,111,58,106,56,104,56,101,53,95,48,90,47,85,46,78,49,76,52,78,57,78,60,76,57,73,56,70,56,69,58,72,60,72,62,69,63,66,61,67,60,67,57,66,54,63,49,56,51,51,52,43,54,35,57,29,61,27,66,29,69,32,70,32,78,31,79,31,88,23,89,23,90,24,92,23,92,23,96,28,99,32,99,32,94,35,96,36,102,35,109,37,113,42,120,47,124,54,123,57,119,60,120,61,121,66,122,70,120,73,119,76,118,76,105,71,100,76,100,78,99,83,99,85,100,88,100,87,95,91,93,93,92,93,85,100,90,104,92,104,86,105,83,107,78,109,80,110,80,112,77"
  12.            id="27476">
  13.           <area shape="poly" coords="208,100,213,99,219,100,220,101,225,100,226,99,229,99,230,100,236,100,236,98,238,103,241,103,241,102,244,102,244,105,247,106,248,112,250,115,250,120,248,123,247,127,251,129,252,138,256,139,258,142,261,147,261,153,260,158,258,163,256,167,252,167,251,163,249,160,245,159,240,159,241,162,244,163,244,165,241,166,238,168,232,170,231,172,222,173,221,175,220,177,217,178,212,182,210,185,207,184,204,189,201,187,198,188,193,190,189,193,187,199,184,195,183,193,178,193,175,189,175,185,173,185,176,182,180,174,181,166,184,165,184,160,182,157,181,152,178,151,175,148,175,147,179,146,182,146,182,145,182,142,183,141,186,137,190,137,194,132,194,128,200,127,201,125,201,121,197,121,192,118,196,117,198,116,203,116,202,112,206,108,208,105"
  14.            id="09484">
  15.           <area shape="poly" coords="41,154,39,158,39,165,40,167,39,169,33,172,27,174,26,176,23,177,19,180,18,183,15,184,15,187,15,194,13,196,9,200,8,206,8,210,12,215,14,216,18,216,18,221,15,225,13,229,23,228,28,226,30,224,30,222,32,221,33,223,35,224,37,223,37,220,40,219,41,216,46,216,47,211,44,208,43,204,42,203,42,200,44,200,44,197,43,197,43,195,46,192,48,191,50,192,51,193,53,193,53,189,56,183,60,183,60,178,60,174,57,168,55,168,54,164,53,163,49,162,46,159,45,157,43,156,42,154"
  16.            id="44444">
  17.           <area shape="poly" coords="104,138,100,144,97,148,94,147,93,145,86,142,82,147,77,152,77,154,79,155,79,157,77,158,73,157,71,158,72,160,70,162,64,164,63,161,62,162,61,165,57,169,59,176,60,180,60,182,55,183,54,187,53,192,51,192,49,191,47,191,43,194,43,197,44,198,44,199,41,200,42,203,43,205,44,208,46,212,50,211,53,212,59,223,61,223,62,221,67,221,69,222,69,227,79,227,80,226,82,226,88,232,91,233,94,231,94,228,98,227,99,225,103,224,103,222,101,220,108,220,111,218,117,215,120,212,121,207,114,207,114,204,110,200,110,198,111,197,113,192,117,191,121,188,121,180,119,180,118,175,120,173,121,170,121,166,126,166,126,164,123,161,126,160,126,158,117,152,117,148,111,149,111,152"
  18.            id="35638">
  19.           <area shape="poly" coords="79,303,78,298,81,296,80,293,80,291,83,289,83,286,81,281,83,279,85,275,84,271,90,270,95,270,96,267,94,266,94,264,100,262,107,261,109,262,112,260,113,257,111,255,112,253,114,253,116,255,120,253,121,251,128,249,132,252,134,252,137,251,140,251,141,253,144,255,149,256,151,259,151,266,161,274,158,275,157,278,155,281,153,285,151,286,149,284,148,285,146,288,146,291,146,294,145,296,145,301,145,306,146,308,149,308,150,309,149,312,148,314,144,315,142,313,140,313,138,314,137,314,135,312,135,321,132,323,130,325,127,325,127,323,128,323,128,320,125,321,124,318,121,316,120,314,117,314,116,312,114,313,113,315,113,316,104,316,103,313,97,310,92,306,90,306,90,309,87,309,86,307,84,305,83,305"
  20.            id="87700">
  21.           <area shape="poly" coords="218,244,213,244,210,242,206,243,205,244,201,245,195,246,194,248,193,253,192,256,188,257,184,260,183,254,180,253,177,252,177,250,174,250,169,250,168,252,167,251,167,248,163,248,162,250,159,250,157,249,155,252,151,255,149,259,150,266,158,273,158,275,156,280,154,284,151,285,150,284,148,284,147,287,145,288,145,292,146,293,145,298,145,301,144,306,145,307,148,308,150,310,149,312,149,313,151,317,152,320,156,320,161,319,164,317,164,315,168,315,173,311,181,311,182,310,188,309,188,308,187,307,188,305,191,305,196,305,196,307,198,308,200,308,201,307,203,306,206,306,206,308,206,310,208,312,211,313,214,313,215,311,215,304,211,304,211,302,211,300,212,297,211,296,208,293,206,289,205,287,206,285,208,284,212,281,216,280,222,278,224,275,225,268,227,266,229,267,232,268,234,267,235,265,235,259,234,255,230,252,228,249,225,249,222,250,220,244"
  22.            id="85244">
  23.           <area shape="poly" coords="178,193,176,190,166,192,162,190,161,186,158,186,157,187,149,187,146,186,136,185,136,190,134,192,132,192,131,190,126,191,121,188,119,191,116,192,112,192,112,195,110,198,110,199,112,202,114,206,115,208,121,208,120,210,118,213,110,217,110,222,113,223,115,221,116,225,116,228,118,229,119,231,121,231,122,229,124,229,123,233,124,237,124,242,125,244,127,245,127,249,131,251,132,253,134,253,137,251,140,251,141,255,143,256,145,256,150,258,154,253,156,251,157,249,158,249,159,250,162,250,162,248,166,248,167,251,169,252,172,251,178,251,178,252,182,252,185,255,185,260,187,258,188,256,192,256,194,253,193,250,195,247,199,245,206,244,209,242,212,244,214,243,215,241,208,235,203,234,201,232,197,225,194,221,190,218,193,214,194,211,193,210,189,206,186,205,183,199,180,196"
  24.            id="95030">
  25.         </map>
  26.       </div>
  27.       <div style="margin:0 auto">
  28.         <div id="table">
  29.           <div id="stateInfo">
  30.             <table width="100%" border="0" cellspacing="0">
  31.               <tbody>
  32.                 <tr>
  33.                   <td style="padding-right: 1%"><img src="images/logo.jpg" height="147"
  34.                      width="52"></td>
  35.                   <td style="padding: 1em;">
  36.                     <p id="name" style="font-weight: bolder">Viessmann
  37.                       Kältetechnik GmbH</p>
  38.                     <p id="info1">Firmenzentrale Hof</p>
  39.                     <br>
  40.                     <p>Adresse: <span id="address">Schleizer Strasse 100</span></p>
  41.                     <p id="zipCity">95030 - Hof/Saale</p>
  42.                     <p>Tel. <span id="tel">0 92 81/8 14-0</span></p>
  43.                     <p>Fax. <span id="fax">0 92 81/8 14-269</span></p>
  44.                     <p>E-mail: <span id="mail">[email protected]</span></p>
  45.                     <p id="web">www.viessmann-kaeltetechnik.de</p>
  46.                   </td>
  47.                 </tr>
  48.               </tbody>
  49.             </table>
  50.           </div>
  51.         </div>
  52.         <div id="searchzip"> <br>
  53.           <table id="references" width="100%" border="0" cellspacing="0">
  54.             <tbody>
  55.               <tr>
  56.                 <td>Suche nach PLZ:<br>
  57.                   <input name="zipInput" id="zipInput" size="20" maxlength="5" type="text">
  58.                   <br>
  59.                   <br>
  60.                   <p><img src="images/block2.png"> Firmenzentrale Hof</p>
  61.                   <p><img src="images/block.jpg"> Verkausburo</p>
  62.                 </td>
  63.               </tr>
  64.             </tbody>
  65.           </table>
  66.           <table width="100%" border="0" cellspacing="0">
  67.             <tbody>
  68.               <tr>
  69.                 <td>
  70.                   <p><a id="contactLink" href="#"><img src="images/mail.jpg"></a>
  71.                     E-mail schreiben</p>
  72.                 </td>
  73.               </tr>
  74.               <tr>
  75.                 <td id="references2">
  76.                   <p><a id="vcard" href="#"><img src="images/vcard.png"></a>
  77.                     Vcard Download</p>
  78.                 </td>
  79.               </tr>
  80.             </tbody>
  81.           </table>
  82.         </div>
  83.       </div>
  84.     </div>
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-

Etiquetas: background, color, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:22.