Photoshop Question posted in
The official user guide can be found here.

Vertical Alignment inside 100% Height and Width Background – Photoshop

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

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

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

This is what I currently have…

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

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!

Tags:

2

Answers


  1. 0

    Your css should be like:

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

    try above it is working.

    Give parent div to: display: table;

    edit:

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

    You can check it here:
    http://jsfiddle.net/ketan156/22z6vjrx/5/

    Login or Signup to reply.
  2. 0

    Pls try this :

    http://jsfiddle.net/zj9v81t7/22/

    #app {
    height: 100vh;
    width: 100vw;
    background-color: #28D9F9;
}#app > div {
    left: 50%;
    margin-left: -80px;
    margin-top: -42px;
    position: absolute;
    top: 50%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search