Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Centrowanie elementu w div
david8213
post
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
david8213
post
Post #2





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

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


Ten post edytował david8213 21.03.2020, 09:45:26
Go to the top of the page
+Quote Post

Posty w temacie
- david8213   [CSS]Centrowanie elementu w div   20.03.2020, 11:07:56
- - kapslokk   Zacznij od poprawienia htmla. [HTML] pobierz, pl...   20.03.2020, 11:17:45
- - david8213   nie działa chciałem zrobic dwa divy obok siebie.p...   20.03.2020, 11:36:39
- - viking   Poczytaj o grid i flex a nie jakieś archaizmy.   20.03.2020, 12:03:20
- - david8213   Dlaczego nie przesuwa mi itemów w dół jak zmniejsz...   20.03.2020, 13:32:42
- - viking   A gdzie to niby masz w kodzie? Kod.flex-container...   20.03.2020, 14:24:57
- - david8213   Jak podaje szerokość w procentach to nie działa a ...   20.03.2020, 15:54:05
- - viking   flex-basis: 20%; jak już.   20.03.2020, 17:55:04
- - david8213   Zrobiłem jak poniżej i wszystko ładnie działa tylk...   21.03.2020, 07:15:35
- - viking   Typowe wymiary dla uderzeń: 640 768 1024 1280 i 1...   21.03.2020, 11:16:49
- - david8213   na monitorze wyświetlany jest obrazek z ramką ale ...   21.03.2020, 13:36:57
- - viking   Szczerze mówiąc nie rozumiem co do mnie piszesz. A...   21.03.2020, 16:12:56

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.10.2025 - 23:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn