Вертикално центриране на картина

amgcompany

Registered
Здравейте, изкарвам картини от базата данни, но преди това ги оразмерявам и всяка картинка има различна големина. Имам един малък див в който искам всяка картина да се центрира вертикално надпвам се от картинката по долу да стане по ясно http://prikachi.com/images/106/4731106U.jpg

Ето и кода:

HTML:
<div class="photo_user">
						
							<div class = "pic_select">
								<a href="/viewphoto.php?id=<?php echo $user_id; ?>&pic=<?php echo $row_pic['pic_id']; ?>"><img src="/<?php echo $row_pic['pic_small']; ?>" /> </a>
							</div>
						
						</div>

[css]
.photo_user
{
width: 250px;
float: left;
text-align: center;
padding-top:10px;
}

.pic_select
{
background: url('/../pics/pic_select.png') no-repeat;
width:242px;
height:239px;

}
[/css]
 
ако няма да има постоянни размери и не можеш да си настроиш позицията с маргин пробвай:
[css]vertical-align:center;[/css]
 
mo7ika каза:
ако няма да има постоянни размери и не можеш да си настроиш позицията с маргин пробвай:
[css]vertical-align:center;[/css]

Пробвах го, пробвах и с vertical-align:middle; и за това реших да попитам тук
 
Тогава пробвай с
[css]line-height:стойност на височината на контейнера[/css]
 
Код:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Charset</title>
		<style>
			.content{
				width:300px;
				height:500px;
				line-height:500px;
				border:1px solid red;
				float:left; 
				margin-right:100px;
			}
			.content img{
				vertical-align:middle;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="1.png" />
		</div>
		<div class="content">
			<img src="1.gif" />
		</div>
		<div class="content">
			<img src="1.png" />
		</div>
		<div class="content">
			<img src="4.png" />
		</div>
		<div class="content">
			<img src="5.png" />
		</div>
	</body>
</html>
 
lub4o каза:
Код:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Charset</title>
		<style>
			.content{
				width:300px;
				height:500px;
				line-height:500px;
				border:1px solid red;
				float:left; 
				margin-right:100px;
			}
			.content img{
				vertical-align:middle;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="1.png" />
		</div>
		<div class="content">
			<img src="1.gif" />
		</div>
		<div class="content">
			<img src="1.png" />
		</div>
		<div class="content">
			<img src="4.png" />
		</div>
		<div class="content">
			<img src="5.png" />
		</div>
	</body>
</html>

Мерси, така стана +1
 

Back
Горе