Wyrównanie 2 divów do środkowego diva

Question

Witojcie, mam problem ponieważ nie wiem jak zrobić, aby te 2 strzałki automatycznie dopasowywały się do wielkości tego obrazka po środku.

http://wojtas69.esy.es/

				<div  class="slider">
					
						<span class="strzalka-left">
						<span class="angle"><i class="fa fa-angle-left"></i></span>
						</span>
						<span class="slider_middle">
							<span class="slider_text"><img src="http://www.repostuj.pl/files/2015/07/343_55a9fcdee7bfb.jpg"></span>
						<span class="strzalka-right">
							<span class="angle"><i class="fa fa-angle-right"></i></span>
						</span>
						<div style="clear:both;"></div>
				</div>

.slider
{
	margin-top:50px;
}
.strzalka-left
{
 	font-size:70px;
	float:left;
	color: rgba(202, 202, 202, 0.26);
	transition:All 1s linear;
	-webkit-transition:All 0.7s ease-in;
	-moz-transition:All 0.7s ease-in;
	-o-transition:All 0.7s ease-in;	
	color: rgba(202, 202, 202, 0.26);
}
.strzalka-right
{
	transition:All 1s linear;
	-webkit-transition:All 0.7s ease-in;
	-moz-transition:All 0.7s ease-in;
	-o-transition:All 0.7s ease-in;
	font-size:70px;
	float:right;
	color: rgba(202, 202, 202, 0.26);
}
.strzalka-right:hover, .strzalka-left:hover
{
	color: rgba(202, 202, 202, 0.46);
}
.slider_middle
{
	text-align:center;
	margin:auto auto;
	float:left;
	vertical-align: middle;
	width: 94%;
	line-height:6;
}

Answer 1

Spróbuj tak:

Dla slidera ustaw

position:relative

dla strzałek aby były na środku elementu

position:absolute;
top:50%;
display:block;
transform:translateY(-50%);

Answer 2

Hmmm, albo spróbuj dać strzałkom i  obrazkowi float:left; a później ustaw cały div slajder na środku marginesami czy jak tam chcesz :)

Answer 3

<span class="slider_text"><img src="<a href="http://www.repostuj.pl/files/2015/07/343_55a9fcdee7bfb.jpg" ><="" span>"="" rel="nofollow" target="_blank" original-title="" title="">http://www.repostuj.pl/files/2015/07/343_55a9fcdee7bfb.jpg"></span></a>

Ta linia wydaje się lekko przekombinowana

Comments

Ta linia wygląda tak:
 

<span class="slider_text"><img src="http://www.repostuj.pl/files/2015/07/343_55a9fcdee7bfb.jpg"></span>

Nie wiem dlaczego tak to się dodało.

---

Z powodu istniejącego buga autolinkowania na forum, który rozwala praktycznie każdy kod…

---

http://jsfiddle.net/29dforvo/

Coś takiego może. Zamiast ikonek dałem + i - i troche zmieniłem tego spana bo mi jakieś krzaczki się wyświetlały na jsfiddle. Jedyne co zmieniłem w tym kodzie to display:inline-block; zamiast float:left; w .strzałka-left, .strzałka-right i .slider-middle. Dodatkowo zmniejszyłem width .slider-middle na 90% bo nie mieściły się wszystkie elementy w jednej linii.

Answer 4

Dzięki za odpowiedzi, ale zrobiłem to po swojemu.
Stworzyłem tabelke i i strzalki same dopasowują się do długości slajda.

Comments

Tabelka to chyba najgorsze rozwiązanie ze względu na semantykę kodu.