问题描述
我是html和css的真正初学者,所以如果你们可以给我一些洞察力,这将是很好的。
I'm a real beginner at html and css so it will be great if you guys can give me some insight!
我目前正在使用我的个人网站。我想要完成的是这样的... (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;
}
您可以在这里查看:
这篇关于100%高度和宽度背景内的垂直对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!