100％高度和宽度背景内的垂直对齐 [英] Vertical Alignment inside 100% Height and Width Background

问题描述

我是html和css的真正初学者，所以如果你们可以给我一些洞察力，这将是很好的。

I'm a real beginner at html and css so it will be great if you guys can give me some insight!

我目前正在使用我的个人网站。我想要完成的是这样的... http://gyazo.com/741e08b227cb1e65f985bdd6b707815c （Photoshop）

I'm currently working on my personal website. What I want to accomplish is something like this... http://gyazo.com/741e08b227cb1e65f985bdd6b707815c (Photoshop)

彩色背景，高度和宽度均为100％，包含中心元素（应用图标，应用名称，应用说明）

A colored background with 100% height and width, with centered elements (app icon, app name, app description)

这是我目前的...

HTML
<section id="app">
    <div>
        <h2>app</h2>
        <p>This is a sample description <br> for an iOS application.<p>
    <div>
</section>

CSS
#app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
}

我知道这个设计可能比较容易编写代码，我有一个困难的时间垂直对齐和水平对齐我的元素。从其他类似设计的网站，我发现css称为box-sizing，但我不知道如何实现这到我的代码。

I know this design might be fairly easy to code, but with my skill set I am having a hard time vertical aligning and horizontal aligning my elements. From poking around other sites with similar designs, I found css called "box-sizing", but I have no clue how to implement this into my code. If anyone can help, that will be great!

推荐答案

您的css应该是这样：

Your css should be like:

#app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
     vertical-align:middle;
    text-align: center;
    display: table-cell;
}

尝试以上它是工作。

给父div： display：table;

edit：

HTML ：

HTML:

    <div class="icn">
        <img src="app.png" />
    </div>
    <div class="txt">
        <h2>app</h2>
        <p>This is a sample description <br> for an iOS application.<p>
    <div>

CSS ：

.icn{
   display:inline-block;  
}

.txt{
    display:inline-block;  
}

您可以在这里查看：
http://jsfiddle.net/ketan156/22z6vjrx/5/

这篇关于100％高度和宽度背景内的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！