HTML + CSS - centrowanie zawartości DIV w innym DIV - prosty problem

Question

Grzebie sobie stronę na użytek własny...
Uparłem się, że to upiszę jakoś, choć ostatni kontakt z HTML miałem w wersji bodajże 3 :)

Szukam poradników, ale  chwilowo jestem w kropce...
Chce osiągnąć coś takiego:


W moim przypadku będą to 4 "pola" w 1 rzędzie

upisałem takie coś:
CSS

.ico_bar1 {
  background-color: red;  /*red - dobrze widac do testów*/
  padding: 10px;
  float: left;
  width: 100%; 
}

.ico1 {
  background-color: #ffffff;
  margin: 10px;
  float: left;
  width: 23%; 
}

.ico2 {
  background-color: #ffffff;
  margin: 10px;
  float: left;
  width: 23%; 
}

.ico3 {
  background-color: #ffffff;
  margin: 10px;
  float: left;
  width: 23%; 
}

.ico4 {
  background-color: #ffffff;
  margin: 10px;
  float: left;
  width: 23%; 
}

@media screen and (max-width: 990px) {
  .topleft, .topmain, .topright, .left, .right, .gradient1, .gradient2, .menu, .ico1, .ico2, .ico3, .ico4, 
  .ico_bar1, .ico_bar2
  {
    width: 100%; 
  }
}
/*łopatologiczna responsywność */

img {         /*potrzebne w innej części strony, z-index dla menu "by było na obrazku"*/
    width: 100%; 
    height: 100%; 
    object-fit: contain;
	z-index: 1;
}

IMG.ico {                    /*potrzebuje wycentrować obrazek wewnątrz diva i to spłodziłem*/
    display: block;
    margin-left: 50%;
    margin-right: -50%; 
	}

HTML
 

<div class="ico_bar1">
	<div class="ico1">
		<h3 class="c">
		test1
		</h3>
	</div>
	<div class="ico2">
		<h3 class="c">
		test2
		</h2>
	</div>
	<div class="ico3">
		<h3 class="c">
		test3
		</h2>
	</div>
	<div class="ico4">
		<h3 class="c">
		test4
		</h2>
	</div>
</div>		

Niestety nie mam pojęcia jak wycentrować te divy tak by nadrzędny div ico_bar1 który zajmuje 100% ekranu
zawierał 4 divy w lini "wycentrowane" w jego zawartości (nie mogę użyć po prostu 4x 25% gdyż z niezrozumiałego powodu 4div ląduje wtedy w 2giej lini...)

Centruje text w div za pomocą definicji <h3> w CSS i to działa dla moich potrzeb ;)
Nie bardzo jednak wiem jak wycentrować obrazek, gdyż domyślnie dla całej strony zdefiniowałem właściwości obrazków co widać w powyższych fragmentach CSS

Myśle, że temat banalny, ale co nie znajdę to nie chce działać...
Podpowie ktoś jak zdefiniować te divy by były wyśrodkowane w 1 lini??

Cały kod mogę wrzućić ale to masę czytania bo jako amator piszę to strasznie by samemu się w tym nie pogubić, do tego dochodzi js jeszcze...

 

Answer 1

Możesz użyć atrybutu display: flex; dla diva o klasie ico-bar1

Comments

body
{
margin: 0;
}
.ico_bar1 {
  background-color: red;  /*red - dobrze widac do testów*/
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
}

i żadnego float: left nie potrzebujesz

---

I jeszcze jedno. Nie rób klas ico1, ico2, ico3 i ico4. Daj tym wszystkim divom klasę ico i dla selektora .ico ustaw

.ico {
  background-color: #ffffff;
  margin: 10px;
  width: 23%; 
}
 

 

---

@Piotrek2713, 
Dziękuje za podpowiedź!
Niestety, takie rozwiązanie nie zadziała dla mnie lub po prostu nie umiem go zastosować...
Tzn. oczywiście zadziała i wyśrodkuje 4 divy tylko nie będzie to responsywne :(
Może ja tego nie napisałem zbyt jasno.
Te divy zastosowałem tylko po to by po przekroczeniu dolnego limitu rozdzielczości
 

@media screen and (max-width: 990px) {
  .topleft, .topmain, .topright, .left, .right, .gradient1, .gradient2, .menu, .ico1, .ico2, .ico3, .ico4, 
  .ico_bar1, .ico_bar2
  {
    width: 100%; 
  }
}

 

z położenia
div1 div2 div3 div4
przejść na
div1

div2

div3

div4

 

Po zastosowaniu

display: flex;

  justify-content: space-evenly;

mam po prostu statyczne divy, który się skalują w lini :(

 

---

Jeśli chodzi o responzywnosc, to od tego jest bootstrap 

Kurs video

 

 

 

 

 

---

Ja rozumiem, że to super popularna sprawa, niestety poległem już na początkach zabaw z bootstrapem.
Jak do tej pory upisałem sobie 3/4 strony, która jest w pełni responsywna na samych divach, teraz po prostu poległem na zagadnieniu zapewne banalnym...
Wrzucam screen:
fullscreen:
mobile/small:

 

Jedyny problem to brak wycentrowania divów w lini i jak zgaduje przez to ucinanie ich gdy są w kolumnie.
 

---

Wyrównanie do lewej jest niepotrzebne.

Zachowanie diva ico_bar musi być domyślne (display: block)

oraz wyrównanie tekstu do środka

}
.ico_bar1 {
  background-color: red;  /*red - dobrze widac do testów*/
  padding: 10px;
  text-align: center;
}

divy ico muszą mieć display: inlne-block aby ustawiły się w jednej linii (text align w divie nadrzędnym aby były wyśrodkowane)

.ico {
  background-color: #ffffff;
  margin: 10px;
  width: 23%;
  display: inline-block;
}

Teraz responzywność

@media screen and (max-width: 1170px) {
	.ico
  {
	width: 46%;
  }
}
@media screen and (max-width: 570px) {
	.ico
  {
	width: 92%;
  }
}

Nie musisz pisać width: 100% ponieważ przeglądarka domyślnie ustawia taką szerokość dla każdego elementu.

zwróć uwagę na szerokość divów .ico w responzywności

---

Dziękuję bardzo za pomoc!
Z Pana pomocą jakoś to wymodziłem i działa :D

Answer 2

Może spróbuj z grid-em.

<div class="ico_bar1">
    <div class="ico ico1">
        <h3 class="c">
        test1
        </h3>
    </div>
    <div class="ico ico2">
        <h3 class="c">
        test2
        </h2>
    </div>
    <div class="ico ico3">
        <h3 class="c">
        test3
        </h2>
      <img src="https://picsum.photos/100/100/?random=1">
    </div>
    <div class="ico ico4">
        <h3 class="c">
        test4
        </h2>
    </div>
</div>

* 
{
  box-sizing: border-box;
}

html,
body
{
  margin: 0;
  padding: 0;
}

.ico_bar1
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1em;
  
  background-color: red;
  margin: 1em auto;
  padding: 1em;
  width: 95vw;
  text-align: center;
}

.ico_bar1 .ico 
{
  background-color: #ffffff;
}

@media screen and (max-width: 990px)
{
  .ico_bar1   
  {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, minmax(1fr, 1fr));
  }
}

.ico_bar1 img
{
  display: block;
  margin: 1em auto; /* lub margin: 0 auto; */
}