Środkowanie diva w pionie

Question

Jak ustawić diva tak, aby odległość od górnej i dolnej krawędzi diva nadrzędnego była zawsze równa? Próbowałem wiele rozwiązań z internetu i żadnego nie potrafię użyć. Zależałoby mi, aby miał też wskaźnik float: left;.

Comments

Próbowałem wiele rozwiązań z internetu i żadnego nie potrafię użyć.

Możesz pokazać ich kod?

Zależałoby mi, aby miał też wskaźnik float: left;

Do czego potrzebny Ci jest float? 

---

Możesz pokazać ich kod?

Kod jest bardzo długi, więc miałbym wysłać całość, czy wybrać odpowiedni wycinek? Dodatkowo jest w trakcie przeróbki, więc może być średnio czytelny.

Do czego potrzebny Ci jest float? 

Takie jest pozycjonowanie wewnątrz nadrzędnego diva.

---

Skoro jest długi, to wstaw na CodePen albo JSFiddle. Jeśli uda Ci się wyodrębnić możliwie wąski fragment, który stanowi problem, to łatwiej będzie znaleźć przyczynę.

Takie jest pozycjonowanie wewnątrz nadrzędnego diva

Float nie służy stricte do pozycjonowania elementów, a do ich opływania. Może więc niepotrzebnie z niego korzystasz.

---

Jeśli uda Ci się wyodrębnić możliwie wąski fragment, który stanowi problem, to łatwiej będzie znaleźć przyczynę.

<div class="Przestrzeń1P K19">
	<div class="Space1P"> </div>

	<div class="AplikacjaIkonaP">
		<img src="../../Aplikacje/21.png">
	</div>
	
	<div class="Strefa1P">
		<div class="Strefa7P">
			<div class="TytułP"> <b>Kulago Pogromi</b> • 15:39 </div>
			
			<div class="Treść1P"> Co tam u ciebie byczku? U mnie bardzo dobrze, więc życzę smacznej kawusi. </div>
		</div>
		
		<div class="Symbol1P K2">
			<img src="Symbole/Zamknij.png">
		</div>
	
		<div class="Clear"> </div>
		
		<div class="Strefa7P">
			<div class="TytułP"> <b>Karol Wiśniewski</b> • 14:02 </div>
			
			<div class="Treść1P"> Siema, chcesz wziąć udział w moim nowym projekcie? Potrzebujemy 20 chętnych. </div>
		</div>
		
		<div class="Symbol1P K2">
			<img src="Symbole/Zamknij.png">
		</div>
	
		<div class="Clear"> </div>
	
		<div class="SpaceP"> </div>
	</div>
	
	<div class="Clear"> </div>
</div>

.Przestrzeń1P {
	width: 450px;
	margin: 0 25px;
	border-radius: 25px;
}

.Przestrzeń2P {
	padding: 6px 0;
	width: 400px;
	margin: 0 50px;
	border-radius: 0 0 18px 18px;
	transition: all 0.2s ease-in-out;
	font-size: 13px;
}

.Przestrzeń2P:hover {
	transform: translate(0, 0.6px) scale(1.03);
	cursor: pointer;
}

.Przestrzeń2P > span {
	opacity: 0.8;
}

.Przestrzeń3P {
	width: 450px;
	margin: 0 25px;
	border-radius: 25px;
}

.Przestrzeń4P {
	width: 435px;
	margin: 15px 25px 0 25px;
	border-radius: 15px;
	padding: 0 0 8px 15px
}

.Strefa1P {
	width: 385px;
	float: left;
}

.Strefa2P {
	width: 182.5px;
	height: 75px;
	margin: 5px 10px;
}

.Strefa3P {
	margin: 3px 15px 3px 0;
	float: left;
}

.Strefa4P {
	margin-top: 13px;
	width: 500px;
}

.Strefa4P > img {
	width: 35px;
	height: 35px;
	margin: 2px 15px 2px 25px;
	border-radius: 10px;
	float: left;
	box-shadow: 0 0 25px -4px #000;
}

.Strefa5P {
	width: 256px;
	float: left;
}

.Strefa6P {
	width: 435px;
	margin-left: 15px;
	padding-bottom: 5px;
}

.Strefa7P {
	width: 343px;
	float: left;
	margin-top: 10px;
	transition: all 0.2s ease-in-out;
}

.Strefa7P:hover {
	scale: 1.01;
	cursor: pointer;
}

.Strefa8P {
	margin: 3px 15px 13px 15px;
	float: left;
}

.Strefa9P {
	width: 343px;
	float: left;
	margin: 14px 0 4px 0;
	transition: all 0.2s ease-in-out;
}

.Strefa9P:hover {
	scale: 1.01;
	cursor: pointer;
}

.AI1P {
}

.AI2P {
	margin: 21px 15px;
}

.AI3P {
	margin: 64.5px 15px;
}

.AI4P {
	margin: 55.5px 15px;
}

.AI5P {
	margin: 23.5px 15px;
}

.AI6P {
	margin: 45.5px 15px;
}

.OI1P {
	margin: 21px 15px 13px 0;
}

.OI2P {
	margin: 12px 15px 4px 0;
}

.OI3P {
	margin: 30px 15px 22px 0;
}

.OI4P {
	margin: 57px 15px 49px 0;
}

.OI5P {
	margin: 38px 15px 30px 0;
}

.STytułP {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
}

.SOpisP {
	font-size: 12px;
	text-align: left;
}

.AplikacjaIkonaP {
	margin: 15px;
	width: 35px;
	height: 35px;
	float: left;
	border-radius: 10px;
	box-shadow: 0 0 25px -4px #000;
}

.AplikacjaIkonaP > img {
	width: 35px;
	height: 35px;
	border-radius: 10px;
}

.OdbiorcaIkonaP {
	width: 35px;
	height: 35px;
	float: left;
	border-radius: 20px;
	box-shadow: 0 0 25px -4px #000;
}

.OdbiorcaIkonaP > img {
	width: 35px;
	height: 35px;
	border-radius: 20px;
}

.PowiadomienieIkonaP {
	height: 66px;
	margin: 4px 7px 0 0;
	float: left;
}

.PowiadomienieIkonaP > img {
	height: 66px;
	border-radius: 10px;
	box-shadow: 0 0 25px -4px #000;
}

.TytułP {
	text-align: left;
	font-size: 14px;
}

.Treść1P {
	text-align: left;
	font-size: 12px;
}

.Treść2P {
	text-align: left;
	font-size: 12px;
	float: left;
	width: 210px;
}

.Treść3P {
	text-align: left;
	font-size: 12px;
	float: left;
	width: 253px;
}

.PowiadomienieTekstoweP {
	transition: all 0.2s ease-in-out;
}

.PowiadomienieTekstoweP:hover {
	cursor: pointer;
	scale: 1.01;
}

.PowiadomienieTekstoweP > img {
	width: 35px;
	height: 35px;
	margin: 5px 15px;
	border-radius: 10px;
	float: left;
	box-shadow: 0 0 25px -4px #000;
}

.PTTytułP {
	font-size: 14px;
	text-align: left;
}

.PTOpis1P {
	font-size: 12px;
	text-align: left;
}

.PTOpis2P {
	font-size: 12px;
	text-align: left;
	opacity: 0.8;
}

.PowiadomienieObrazkoweP {
	width: 202.5px;
	margin: 15px 0 15px 15px;
	float: left;
	text-shadow: none;
	box-shadow: 0 0 20px -10px #000;
	border-radius: 15px;
	transition: all 0.2s ease-in-out;
}

.PowiadomienieObrazkoweP:hover {
	cursor: pointer;
	scale: 1.01;
}

.POZdjP {
	width: 202.5px;
	height: 120px;
	border-radius: 15px 15px 0 0;
}

.POAplikacjaP {
	width: 35px;
	height: 35px;
	margin: 75px 10px 10px 157.5px;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 #000;
}

.POTytułP {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
}

.POTekstP {
	text-align: left;
	font-size: 12px;
}

.POJeszczeP {
	margin: 0 0 6px 10px;
	font-size: 12px;
	text-align: left;
	opacity: 0.8;
}

.GłównieP {
	width: 450px;
	margin-left: 30px;
}

.GłównieP > img {
	width: 35px;
	height: 35px;
	margin: 5px 0 5px -15px;
	border-radius: 10px;
	float: left;
	box-shadow: 0 0 25px -4px #000;
	box-shadow: 0 0 10px 0 #000;
}

.GłównieTekstP {
	width: 285px;
	font-size: 14px;
	margin: 12px 0 12px 15px;
	float: left;
	text-align: left;
}

.JeszczeP {
	width: 300px;
	margin: 5px 0 10px 15px;
	text-align: left;
	font-size: 12px;
}

.JeszczeP > span {
	opacity: 0.8;
}

.Symbol1P {
	border-radius: 10px;
	padding: 5px;
	margin: 12px 12px 0 0;
	width: 20px;
	height: 20px;
	transition: all 0.2s ease-in-out;
	float: right;
}

.Symbol1P > img {
	width: 20px;
	height: 20px;
}

.Symbol1P:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.Symbol2P {
	border-radius: 10px;
	margin: 3px 0 3px 15px;
	width: 33px;
	height: 33px;
	transition: all 0.2s ease-in-out;
	float: left;
}

.Symbol2P > img {
	width: 23px;
	height: 23px;
	padding: 5px;
}

.Symbol2P:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.SpaceP {
	height: 10px;
}

CSS'a jest trochę sporo, ale musiałbym wydzielać każdy selektor osobno, więc wkleiłem już tak

Float nie służy stricte do pozycjonowania elementów, a do ich opływania. Może więc niepotrzebnie z niego korzystasz.

Jeśli będziesz widział, jak inaczej mogę to rozstawić, aby ten obrazek 35x35px był wyśrodkowany wertykalnie, to wykorzystam ten sposób, po prostu do tej pory float: left; służył mi do tego w sposób, jaki oczekiwałem.

Answer 1

Możesz też jeden wiersz konwersacji "zamknąć" w dodatkowym kontenerze ( ramka na obrazku - niebieska) np.

[ on-line ]

<div class="chat-container">
  
  <div class="row-user-conversation">
    
    <div class="ikona">
      <img src="../../Aplikacje/21.png">
    </div>
    
    <div class="user-conversation">
      <div class="TytułP">
        <b>Kulago Pogromi</b> • 15:39
      </div>
      <div class="Treść1P">
        Co tam u ciebie byczku? U mnie bardzo dobrze, więc życzę smacznej kawusi.
      </div>
    </div>
    
    <div class="symbol">
      <img src="Symbole/Zamknij.png">
    </div>
    
  </div><!-- /row-user-conversation -->
  
</div>

* {
  box-sizing: border-box;
}
.chat-container {
  width: 450px;

  /* dla demonstracji */
  border: 2px solid red;
}
.row-user-conversation {
  width: 100%;
  display: flex;
  margin-bottom: 0.5em;

  /* dla demonstracji */
  border: 2px solid blue;
}
.row-user-conversation .ikona {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* dla demonstracji */
  background-color: pink;  
}
.row-user-conversation .user-conversation {
  /* dla demonstracji */
  background-color: green; 
}
.user-conversation .TytułP {
  text-align: left;
  font-size: 14px;
} 
.user-conversation .Treść1P {
  text-align: left;
  font-size: 12px;
}
.row-user-conversation .symbol {
  position: relative;
  width: 10%;

  /* dla demonstracji */
  background-color: lightblue;  
}
.row-user-conversation .symbol img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translatex(-50%);  
}

 

Answer 2

Zobacz tu: https://www.freecodecamp.org/news/how-to-center-objects-using-css/

Comments

A czy cokolwiek z tego zadziała, kiedy div ma wskaźnik float: left;?

---

Ja bym usunął float, bo nie jest tam użyty zgodnie z przeznaczeniem (opływanie elementów), a do ułożenia layoutu. Skorzystaj z Grida lub Flexboxa (w linku z odpowiedzi są przykłady).

---

Nie potrafię tego zastosować u siebie

---

Uparłeś się na stosowanie technologii do celu, który nie jest dla niej przeznaczony. Przejdź do technologii dedykowanych do układania elementów na stronie - grid i/lub flex, a kłopoty znikną. Chcesz pomocy, zatem daj sobie pomóc.

Answer 3

Na początku też miałem podobny problem i szukałem idealnego rozwiązania. Według mnie to jest najlepsze. Środkuje ono element zarówno w pionie, jak i w poziomie.

.nadrzedny-div
{
     display: grid;
     place-items: center;
}

A jeśli ważne jest w programie - żeby element był wypozycjonowany jedynie w jednym kierunku - to polecam użyć:

.nadrzedny-div
{
     display: grid;
     justify-content: center;
}

Comments

@PanKichał;

Według mnie to jest najlepsze. 

a według Mnie, to zależy od kontekstu (dlatego jest kilka sposobów "centrowania") 

np. w linku, który podał @SzkolnyAdmin; jest ich kilka "pokazanych"

 

Przykład, mamy dwa identyczne kontenery i dwa najbardziej popularne obecnie sposoby "centrowania" sprawdź sam: on-line. 

<div class="container-1">
  <div>Lorem</div>
  <div>ipsum</div>
</div>

<div class="container-2">
  <div>Lorem</div>
  <div>ipsum</div>  
</div>

[class^="container"] {
  width: 80vw;
  height: 45vh;
  margin: 1em auto;
  border: 2px solid red;
}
[class^="container"] div {
  text-align: center;
  width: 5em;
  border: 2px solid blue;
}
.container-1 {
  display: grid;
  place-items: center;
}
.container-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}