Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Centrowanie elementu w div
Forum PHP.pl > Forum > Przedszkole
david8213
20.03.2020, 11:07:56
Nie mogę wycentrować obrazka

[HTML] pobierz, plaintext 
  1. .kontener_blog {
  2.   background-color: white;
  3. //  min-width: 1000px;
  4.   width: 100%;
  5.   font-family: Arial;
  6.   z-index: 1;
  7.   left:0 ;
  8.   margin:0 auto;
  9.   margin-top: 5em;"
  10. }
  11.  
  12.  
  13. <div class="kontener_blog">
  14.  
  15. <center> <table width=90% bgcolor=green></tr><td>
  16.  
  17.  
  18.  
  19.  <table width=60% bgcolor=yellow style="float:left; min-width: 300px;"></tr><td><center> 
  20. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  21. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  22.  <br><br> 
  23.  
  24. </td></tr><table>
  25.  
  26.  
  27. <div width="40%" style="float:left; background-color: blue; ">
  28.  
  29. <img width="300" src="http://www.tapetynapulpitkomputera.pl/uploads/58c283736b72e_3840x2160.jpg" border="0" style="margin:0 auto; display:block;">
  30.  
  31. </div>
  32.  
  33. <br>  </td></tr><table>
  34.  
  35. </div>
  36.  
  37.  
[HTML] pobierz, plaintext
kapslokk
20.03.2020, 11:17:45
Zacznij od poprawienia htmla.


[HTML] pobierz, plaintext 
  1. <table width=90% bgcolor=green></tr><td>
[HTML] pobierz, plaintext

otwierasz <table> i zamykasz <tr> ? Popraw to tak, zeby html byl poprawny, jesli nadal nie bedzie dzialalo to wrzuc poprawiony kod jeszcze raz.
david8213
20.03.2020, 11:36:39
nie działa

chciałem zrobic dwa divy obok siebie.po lewej wycentrowany tekst a po prawej wycentrowany obrazek.

Przy zmniejszaniu okna przeglądarki prawy div ma przeskoczyć na dół pod tekst
viking
20.03.2020, 12:03:20
Poczytaj o grid i flex a nie jakieś archaizmy.
david8213
20.03.2020, 13:32:42
Dlaczego nie przesuwa mi itemów w dół jak zmniejszam rozmiar okna przeglądarki

[XML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.  
  6.  
  7. .flex-container {
  8.   background-color: gray;
  9.   padding: 10px;
  10.   display: flex;
  11.  justify-content: center;
  12.  
  13.  align-content: center;
  14.   height: 200px;
  15.   flex-wrap: wrap; 
  16.  
  17. }
  18. .flex-item1 {
  19.   background-color: red;
  20.   border: 1px black solid;
  21.   width: 20%; 
  22. }
  23.  
  24. .flex-item2 {
  25.   background-color: red;
  26.   border: 1px black solid;
  27.   width: 20%; 
  28.  
  29. }   
  30.  
  31. .flex-item3 {
  32.   background-color: red;
  33.   border: 1px black solid;
  34.   width: 20%; 
  35.  
  36. } 
  37.     </style>
  38.   </head>
  39.   <body>
  40.  
  41.  
  42.  
  43. <div class="flex-container">
  44.   <div class="flex-item1">fffffff<br>ggggggggggggg</div>
  45.   <div class="flex-item2"></div>
  46.   <div class="flex-item3"></div>
  47. </div>
  48.  
  49.  
  50.  
  51.   </body>
  52. </html>
[XML] pobierz, plaintext
viking
20.03.2020, 14:24:57
A gdzie to niby masz w kodzie?

Kod
.flex-container {
  flex-direction: column;
}
@media (min-width: 400px) {
  .flex-container {
    flex-direction: row;
  }
}
david8213
20.03.2020, 15:54:05
Jak podaje szerokość w procentach to nie działa a jak wpisze wartość stała to działa .tyle że ja chcę aby było w procentach
viking
20.03.2020, 17:55:04
flex-basis: 20%; jak już.
david8213
21.03.2020, 07:15:35
Zrobiłem jak poniżej i wszystko ładnie działa tylko ... jakich parametrów użyć żeby w telefonie wyświetlało mi zdjęcie pod tekstem?

[XML] pobierz, plaintext 
  1.  
  2. <html>
  3.  
  4. <head>
  5.  
  6. <style>
  7. .flex-container {
  8.  width: 80%;
  9.  background-color: gray;
  10.  padding: 10px;
  11.  display: flex;
  12.  justify-content: center;
  13.  align-content: center;
  14.  margin-left: auto;
  15.  margin-right: auto;
  16.  
  17. //flex-basis: auto;
  18. //flex-wrap: wrap; 
  19. }
  20.  
  21.  
  22. .flex-item1 {
  23.  
  24.  
  25.  background-color: red;
  26.  
  27.  
  28.  border: 1px black solid;
  29.  
  30. flex-basis: 80%;  
  31.  
  32. //flex-grow: 1;
  33.  
  34. text-align: center;
  35. }
  36.  
  37.  
  38. .flex-container {
  39.   flex-direction: column;
  40. }
  41. @media (min-width: 800px) {
  42.   .flex-container {
  43.     flex-direction: row;
  44.   }
  45. }
  46.  
  47. </style>
  48.  
  49. </head>
  50.  
  51. <body>
  52.  
  53.  
  54. <br>
  55.  
  56. <div class="flex-container">
  57.  
  58.  
  59. <div class="flex-item1" style="min-width: 200px">
  60. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  61. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  62. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  63. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  64. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  65. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  66.   </div>
  67.  
  68.   <div class="flex-item1" style=" flex-basis:auto; min-width: 200px">
  69.  
  70. <img width="80%" src="https://cdn.pixabay.com/photo/2017/01/06/19/12/soap-bubble-1958648_960_720.jpg" border="0" style="margin:0 auto; display:block; padding: 5px 5px 5px 5px;">
  71.  
  72.   </div>
  73.  
  74. </div>
  75.  
  76.  
  77. <!----contener end-----> 
  78.  
  79. </body>
  80.  
  81. </html>
  82.  
[XML] pobierz, plaintext


Dostawiłem jak poniżej i działa ale na moim telefonie..
Czy bedzie działać na innych... ?

[XML] pobierz, plaintext 
  1. @media (min-height: 1079px) {
  2.   .flex-container {
  3.     flex-wrap: wrap; 
  4.   }
  5. }
[XML] pobierz, plaintext


a drugie pytanie
Jest coś takiego w CSS żeby np uzyć 

[XML] pobierz, plaintext 
  1. flex-basis: auto -5%;
[XML] pobierz, plaintext
viking
21.03.2020, 11:16:49
Typowe wymiary dla uderzeń: 640 768 1024 1280 i 1600px.

flex-basis: auto -5%; a co to ma robić?
david8213
21.03.2020, 13:36:57
na monitorze wyświetlany jest obrazek z ramką ale dolną cześć zasłania go kocówka przeglądarki przez pasek zadań
viking
21.03.2020, 16:12:56
Szczerze mówiąc nie rozumiem co do mnie piszesz. Albo pokaż kod, albo się określ co chcesz osiągnąć.
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.