图像卡在另一个 div 的图像中答案

【问题标题】：Image stuck in another div's image图像卡在另一个 div 的图像中
【发布时间】：2015-07-02 07:01:46
【问题描述】：

我最近学习了 HTML/CSS，因为我突然需要为我的应用创建一个网站。这个特定的页面非常基础。一个字（大号），后跟一张图片。这两个居中。他们的问题是，当我尝试在他们下方获得“在 App Store 上下载”时。这是一张图片：

我不确定为什么 App Store 图像卡在其他对象之一中。我怀疑这与此有关：

     display: flex;
     -webkit-align-items: center;
     align-items: center;
    -webkit-justify-content: center;
      justify-content: center;

我尝试使用 clear: both;, display: block;填充和诸如此类的东西。似乎没有任何效果，我使用谷歌找不到任何东西。这可能是一个非常基本的问题，或者我做了一些愚蠢的事情。但是，我将非常感谢您提供帮助。

HTML 来了：

 <div id="blue">

     <div id="ytfil"> ytfil </div>

     <div class="imgcontainer"><img id="iphonepicture" src="iphonebluesite.png"> </div>

    <div id="container"><img id="appstore" src="App_store_logo.svg"> </div>

</div>

这里我们使用 CSS

 #blue{
width: 100%;
height: 100vh;
background-color: #4689D0;
display:         flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

#ytfil{
font-size: 450px;
color: white;
font-family: helvetica;
margin-right: 50px;
}

#iphonepicture {
margin-right: -200px;
}


#container {
display: block;
}   

 #appstore {
width: 400px;
}

【问题讨论】：

你能发布一张图片来展示你想要实现的目标吗？从您的代码/描述中不是很清楚
嘿！对此表示歉意。我现在添加了一个 imgur 链接！
你的意思是like this？（来源：jsfiddle.net/q35wgpes/2）
完全一样，但“ytfil”和 200x450 也垂直居中！感谢您的帮助。
jsfiddle.net/q35wgpes/5

标签： html image css flexbox

【解决方案1】：

已解决

#blue{
  width: 100%;
  height: 100vh;
  background-color: #4689D0;
  text-align: center;
}

#ytfil{
  font-size: 150px;
  color: white;
  font-family: helvetica;
}

#container {
  display: block;
}   

#appstore {
  width: 200px;
}

    <div id="blue">
      <div id="ytfil"> ytfil </div>
      <div class="imgcontainer">
        <img id="iphonepicture" src="http://placehold.it/300x150/&text=Iphone"> 
      </div>
      <div id="container">
        <img id="appstore" src="http://placehold.it/200x150/&text=Logo"> 
      </div>
    </div>

【讨论】：

如果我不清楚，再次抱歉。 “iPhone”应该与“ytfil”在同一行，“logo”应该在它们下面。就像我的 imgur 图片一样，但只移动了“App Store”徽标。

【解决方案2】：

我不确定这是否是您所追求的，但我认为您的问题是使用 display: flex CSS 属性。

我对我认为你正在尝试做的事情做了一些修改，但我可能是错的。给你：

http://jsfiddle.net/iamjpg/f3aarh5v/

#blue {
  width: 100%;
  height: 100vh;
  background-color: #4689D0;
  display: block;
  text-align: center;
}

【讨论】：

【解决方案3】：

只需添加这个：

#appstore {
    width: 400px;
    align-self: flex-end;
}

编辑：
你希望图片在 ytfill 下方居中

改为这样做：

#container {
    width: 100%;
    display: block;
    align-self: flex-end;
}
#appstore {
    align-self: center;
    width: 400px;
}

【讨论】：

【解决方案4】：

您不需要 display: flex 来执行此操作，您只需 text-align: center 和（未提及的需要）display: table-cell; 即可使 vertical-align: middle 工作。

我已经简化了标记和 css（虽然后者可能看起来更多，但它更简单且得到更好的支持）。

<div id="blue">
    <div id='container'>
        <span id="ytfil">ytfil</span>
        <img id="iphonepicture" src="http://placehold.it/200x450" />
        <br/>
        <img id="appstore" src="http://placehold.it/120x45" />
    </div>
</div>

#blue {
    display: table;
    width: 100%;
    height: 100vh;
    background-color: #4689D0;
    text-align: center;
}
#container {
    display: table-cell;
    vertical-align: middle;
}
#ytfil {
    font-size: 450px;
    color: white;
    font-family: helvetica;
}
#iphonepicture {
    display: inline-block;
    margin-top: 65px;
}

http://jsfiddle.net/q35wgpes/5/（全屏：https://jsfiddle.net/q35wgpes/5/embedded/result/）

【讨论】：