Question

我最近选择了HTML / CSS，因为我突然需要为我的应用创建一个网站。这个特殊页面非常基础。一个字（大尺寸）后跟一个图像。这两个是中心的。他们的问题是，当我试图在他们的下方找到“在App Store上下载”时。这是一张图片：

enter image description here

我不确定为什么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;
}

Answer 1

解决

＆＃13;

#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;
}

＆＃13;

    <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>

＆＃13;

Answer 2

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

我用我认为你想要的东西做了一个小提琴，但我错了。你走了：

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

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

Answer 3

只需添加：

Comparator

修改
你想要在ytfill下面的图片中心

改为：

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

Answer 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/）

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

4 个答案: