Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: IMG w DIV nie chce się wyśrodkować
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
ikem
30.04.2007, 21:57:29
Problem polega na tym że wrzucam obrazek do DIVa który ma zadeklarowany rozmiar i chce go wyśrodkować w pionie ale nie bardzo jestem w stanie to zrobić:
[HTML] pobierz, plaintext 
  1. <div id="elemnet">
  2.   <div id="logo">
  3.      <img src="loga/wycieraczki/log-alca.gif" class="logo_img" />
  4.   </div>
  5.   <div id="opis">tu bedzie opis
  6.   </div>
  7. </div>
[HTML] pobierz, plaintext

a teraz css do tego
[HTML] pobierz, plaintext 
  1. #elemnet {
  2. 	position:relative;
  3. 	margin-top: 10px;
  4. 	margin-right:auto;
  5. 	margin-bottom:0px;
  6. 	margin-left:auto;
  7. 	width: 500px;
  8. 	height: 120px;
  9. 	background-color:#EEEEEE;
  10. }
  11. #logo {
  12. 	position: absolute;
  13. 	left: 20px;
  14. 	top: 10px;
  15. 	background-color:#E1E1E1;
  16. 	width: 100px;
  17. 	height: 100px;
  18. }
  19. #logo img {
  20. 	clear:both;
  21. 	border: none;
  22. 	padding: 0px;
  23. 	margin: 0px;
  24. }
  25. #opis{
  26. 	position: absolute;
  27. 	top: 10px;
  28. 	left: 150px;
  29. 	background-color:#E1E1E1;
  30. 	width: 290px;
  31. 	height: 90px;
  32. 	padding: 5px;
  33. }
[HTML] pobierz, plaintext

i gdzie ja robie błąd w myśleniu??
joshrob
1.05.2007, 09:32:46
witam,

jedna linie tekstu, a plik logo tak bedzie sie zachowywal, najlatwiej, bez dodatkowych kontenetow i akrobacji zeby dzialalo w IE, w pionie srodkuje sie ze pomoca line-height na kontener o wartosci rownej wysokosci tego kontenera oraz dodatkowo obrazkowi nalezy dac vertical-align: middle, aby wyrownac go do srodka tej "wirtualnej" linii tekstu ktora srodkujemy.

co do bledu w mysleniu, "clear: both" na pewno jest bledne, z racji ze nie korzystasz z elementow "plywajacych", nie ma ono tutaj niz do rzeczy.

pozdrawiam,
ikem
1.05.2007, 10:14:47
no i przerobiłem CSSa zgodnie z ty co mówisz
wygląda on teraz tak:

[HTML] pobierz, plaintext 
  1. #elemnet {
  2. 	position:relative;
  3. 	margin-top: 10px;
  4. 	margin-right:auto;
  5. 	margin-bottom:0px;
  6. 	margin-left:auto;
  7. 	width: 500px;
  8. 	height: 120px;
  9. 	background-color:#EEEEEE;
  10. }
  11. #logo {
  12. 	position: absolute;
  13. 	left: 20px;
  14. 	top: 10px;
  15. 	background-color:#E1E1E1;
  16. 	width: 100px;
  17. 	height: 100px;
  18. 	line-height: 100px;
  19. }
  20. #logo img {
  21. 	border: none;
  22. 	vertical-align:middle;
  23. }
  24. #opis{
  25. 	position: absolute;
  26. 	top: 10px;
  27. 	left: 150px;
  28. 	background-color:#E1E1E1;
  29. 	width: 290px;
  30. 	height: 90px;
  31. 	padding: 5px
  32. }
[HTML] pobierz, plaintext

ale niestety nic nie pomogło sad.gifsad.gif
joshrob
3.05.2007, 08:32:15
widac przecenilem ponownie ie; trzeba dodac jeden boks w html pobawic sie cssem
ponizszy kod dziala na pewno w ie6/ff2.0.0.3/op9.20
jesli w ie7 jest zle, zmien komentarz warunkowy

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>css center</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. #elemnet {
  8. position:relative;
  9. margin-top: 10px;
  10. margin-right:auto;
  11. margin-bottom:0px;
  12. margin-left:auto;
  13. width: 500px;
  14. height: 120px;
  15. background-color:#EEEEEE;
  16. }
  17. #logo {
  18. position: relative;
  19. left: 20px;
  20. top: 10px;
  21. background-color:#E1E1E1;
  22. width: 100px;
  23. height: 100px;
  24. line-height: 100px;
  25. }
  26. #box{
  27. text-align: center;
  28. }
  29. #logo img {
  30. vertical-align: middle;
  31. }
  32.  
  33. #opis{
  34. position: absolute;
  35. top: 10px;
  36. left: 150px;
  37. background-color:#E1E1E1;
  38. width: 290px;
  39. height: 90px;
  40. padding: 5px
  41. }
  42.  
  43.  
  44. </style>
  45. <!--[if lte IE 6]><style type="text/css">
  46. #box{
  47. position: absolute;
  48. top: 50%;
  49. left: 50%;
  50. }
  51. #logo img {
  52. border: none;
  53. position: relative;
  54. top: -50%;
  55. left: -50%;
  56. }
  57. </style><![endif]-->
  58.  
  59. </head>
  60.  
  61. <body>
  62. 	<div id="elemnet">
  63. 		<div id="logo">
  64. 			<div id="box">
  65. 				<img src="file.jpg" class="logo_img" />
  66. 			</div>
  67. 		</div>
  68. 		<div id="opis">tu bedzie opis </div>
  69. 	</div>
  70.  
  71. </body>
  72. </html>
[HTML] pobierz, plaintext


pozdrawiam,

/dopisane/

lub prosciej ze stylem in-line

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>center css 2</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. #elemnet {
  8. position:relative;
  9. margin-top: 10px;
  10. margin-right:auto;
  11. margin-bottom:0px;
  12. margin-left:auto;
  13. width: 500px;
  14. height: 120px;
  15. background-color:#EEEEEE;
  16. }
  17. #logo {
  18. position: relative;
  19. left: 20px;
  20. top: 10px;
  21. width: 100px;
  22. height: 100px;
  23. line-height: 100px;
  24. }
  25. #opis{
  26. position: absolute;
  27. top: 10px;
  28. left: 150px;
  29. background-color:#E1E1E1;
  30. width: 290px;
  31. height: 90px;
  32. padding: 5px
  33. }
  34. </style>
  35. </head>
  36.  
  37. <body>
  38. 	<div id="elemnet">
  39. 		<div id="logo" style="background: #E1E1E1 url(lifloat.jpg) 50% 50% no-repeat;"></div>
  40. 		<div id="opis">tu bedzie opis </div>
  41. 	</div>
  42.  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext



pozdrawiam,
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.