HTML

Question

我有一个div＆＃39; imgcontainer＆＃39;还有一个div＆＃39;评论容器＆＃39;代表一张大图片和一个白色的盒子，上面写着评论。我想添加第三个图像，它位于两个顶部，垂直居中。

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

我的问题是我无法弄清楚如何将CSS集成到我的代码中。我可以将什么添加到＆＃39; profilepic＆＃39; 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;
}

Answer 1

在你的CSS中心'profile'图片你可以把它添加到你的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; }

希望它有效：'）

在此示例中，如何将图像置于其他两个图像之间？

HTML

CSS3

1 个答案: