wyrównanie img i span

Question

Jak mogę wyrówać SHARE  tak aby był tak fajnie w połowie grafiki? Napis jest w span

Comments

Pokaż kod.

---

	<div class="work-content">
		<h4>Lorem Ipsum</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
		<img src="images/share.png" alt="share"></img>
		<span>SHARE</span>
		</div>

.work-content{
	width:100%;
	height:100%;
	opacity:0;
	text-align:center;
	padding:50px 0;
}
.work-content:hover{
	opacity:1;
}
.work-content h4{
	font-size:20px;
	font-family: 'Narrow', sans-serif;
	font-weight: bold;
}
.work-content p{
	font-size:14px;
	font-family: 'Lato', sans-serif;
	padding:15px;
}
.work-content img{
	width:25px;
	height:25px;
}
.work-content span{
	font-size:10px;
	font-family: 'Lato', sans-serif;
	display:inline-block;
}

 

Answer 1

Znaczy jak ja bym to robił to bym dał:

obrazkowi:

display: flex;
flex-direction: column;

shareowi:

align-self: center;

Comments

nie działa to u mnie, zrobiłem to positionem, ale jak by ktoś miał inny pomysł to będzie lepiej chyba

---

Znaczy gdybyś dał kod to by było lepiej ;) Akurat flexy są o tyle dobre, że jak zmienisz wielkość przeglądarki, to będą się one ładnie dopasowywać czyli, np. zwiększać lub zmniejszać wraz z nią.