我有一个div'imgcontainer'和一个div'commentcontainer'。代表一个大图像和一个白色的盒子，填充下面的评论。我想添加一个位于两个顶部的第三个图像，垂直居中。在这个例子中，我如何在两个其他图像之间居中一个图像？

所以基本上我想要做的是这样的：https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg

我的问题是，我无法弄清楚如何将CSS做到下面我的代码这个整合。我可以在'profilepic'div中添加什么内容以便将图像设置为位于imgContainer和commentcontainer之间？

HTML

<div id="timeline"> 
      <div class="block2x3 block"> 
       <div class="imgcontainer"> 
        <img src="top-picture.jpg" /> 

        <div class="profilepic"> 
        <img src="facepic.png" /> 
        </div> 
       </div> 
       <div class="commentcontainer"> 
        <div class="peoples"> 
         <a href="#"><strong class="people name">Joe Schmoe</strong></a> and <a href="#">42 other people bought this</a> 
         <p>Have commented on your <a href="#">wall post</a></p> 
        </div> 
       </div> 
      </div>

CSS3

@media (max-width:1860px) { 
#timeline .block .imgcontainer img {width:100%;} 
#timeline div[class*="block"][class*="x1"] {height:150px;} 
#timeline div[class*="block"][class*="x2"] {height:300px;} 
#timeline div[class*="block"][class*="x3"] {height:450px;} 
#timeline div[class*="block2x3"] .imgcontainer {height:60%; position:relative; z-index:1;} 
#timeline div[class*="block2x3"] .commentcontainer {height:40%; z-index:2;} 


.profilepic { 
    margin: 40px 0px 0px 0px; 
    border: 7px solid white; 
    border-radius: 70px; 
}

来源

2014-09-23 stephan

在你的CSS居中 '轮廓' PIC，您可以添加这样对你的CSS：

.profilepic { 
    /*margin: 40px 0px 0px 0px; INSTED OF THIS */ 
    margin-left: auto; /* USE */ 
    margin-right: auto; /* THIS */ 
    border: 7px solid white; 
    border-radius: 70px; 
}

但首先你必须把这个添加到你的css文件中：

html { width: 100%; height: 100%; margin: 0; padding: 0; } 
body { width: 100%; height: 100%; margin: 0; padding: 0; }

希望它有效：'）

来源

2014-09-24 06:54:53

在这个例子中，我如何在两个其他图像之间居中一个图像？

HTML

CSS3

回答

相关问题