图片去DIV下方，而不是与它alighed

我想编写一个设计，但我不能让它正确对齐不管我怎么努力，它不会停留在同一个地方很好。

这里是什么样子

这里是什么，就是要像

，这里是我的代码，希望它可以是固定的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>a</title> 
<link rel="stylesheet" type="text/css" href="style/css/reset.css"/> 
<style> 
body { 
color:#ffffff; 
background:#1f1f1f url(style/images/background.png) repeat-x center top; 
} 

.profileMidSection { 
height:239px; 
width:860px; 
color:#ffffff; 
background:#2e2e2e; 
clear:both; 
} 

ul.profileMidSection { 
list-style:none; 
vertical-align:middle; 
line-height:47px; 
} 

ul.profileMidSection li { 
height:47px; 
vertical-align:middle; 
clear:both; 
} 

ul.profileMidSection li a{ 
height:47px; 
width:175px; 
background:#333333; 
text-decoration:none; 
color:#737373; 
float:left; 
text-align:left; 
padding-left:25px; 
font-family: 'Open Sans', sans-serif; 
font-weight:600; 
font-size:10.5pt; 
margin-left:-40px; 
} 

ul.profileMidSection li a:hover{ 
color:#ffffff; 
border-left:3px solid #83bdf2; 
width:172px; 
} 

.profileCaption { 
background:#3c3c3c; 
width:200px; 
height:35px; 
font-family: 'Open Sans', sans-serif; 
font-weight:600; 
font-size:11pt; 
color:#ffffff; 
border-radius:0 0 4px 4px; 
-webkit-border-radius:0 0 4px 4px; 
} 
</style> 
</head> 

<body> 
    <div class="profileMidSection"> 

     <ul class="profileMidSection"> 
      <li><a href="#">Recommended Games</a></li> 
      <li style="margin-top:1px;"><a href="#">Your Friends Played</a></li> 
      <li style="margin-top:1px;"><a href="#">You Liked</a></li> 
      <li style="margin-top:1px;"><a href="#">Your Friends Liked</a></li> 
      <li style="margin-top:1px;"><a href="#">Disliked</a></li> 
     </ul> 

      <img src="games/images/caption1.png" /> 
      <div class="profileCaption">Angry Birds&trade;</div> 
      <img src="games/images/caption2.png" /> 
      <div class="profileCaption">Mario Kart Pro&trade;</div>  
      <img src="games/images/caption3.png" /> 
      <div class="profileCaption">Lazy&trade;</div>  
    </div> 
</body> 
</html>

来源

2013-04-27 Brad L

裹的各图像和字幕的div与像game-thumb一个类和浮动离开类。然后，将所有游戏放在另一个div容器中，并在其上设置overflow:hidden。

来源

2013-04-27 16:48:46 imsky

谢谢，让我更近了一步，现在它只是将所有图像在一条线上排列在一起，并且您在上面的线上禁用了菜单。 – 2013-04-27 16:53:25

将菜单浮动到左侧，并向游戏画廊添加一个用于抵消菜单宽度的边距。 – imsky 2013-04-27 17:08:26

图片去DIV下方，而不是与它alighed

回答

相关问题