2016-04-18 23 views
1

ウェブサイトのメインページを作成しようとするときに問題が発生しました。私は冒頭にあり、私はどのようにそれを行うには手がかりがありません。基本的に私は、他のテキストの上にいくつかのテキストを持っていますが、それを読むことができます。私はそれをモバイルレスポンシブにしようとしています、そして、私が今持っているものはちょうど正しく見えません。ページの中央にあるテキストを中央に中央に配置

<p>Hello, there!</p> 

インタラクティブデザインの学生。

<ul class="nav nav-tabs"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Work</a></li> 
    <li role="presentation"><a href="#">Get In Touch</a></li> 
</ul> 

と私のCSSは

h1 { 
    left: 0; 
    margin: auto; 
    margin-top: -100px; 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    z-index: 100; 
    font-size: 51px; 
    padding-top: 80px; 
    margin: 15px; 
} 

p { 
    left: 0; 
    line-height: 200px; 
    margin: auto; 
    margin-top: -100px; 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    color: #232324; 
    font-size: 160px; 
    margin:15px; 
} 

this is how it looks like

+0

人は試してみて、それがどのように動作するかを確認し、それのお手伝いをしようとすることができますので、あなたが興味のある人のために... –

+2

セミ正確なデモをcodepenを作成する場合、それは良いでしょう:https://jsfiddle.net/nxgL09z1/ –

+0

Photoshopで画像を作成し、正確に何を表示したいのですか? –

答えて

0

あなたがFlexbox:after擬似要素でこれを行うことができ、ここでフルDemo

body { 
 
    background: #282828; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 
.homepage { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
h1 { 
 
    font-size: 25px; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
h1:after { 
 
    content: "Hello There"; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 75px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    color: white; 
 
    opacity: 0.2; 
 
    transform: translate(-50%, -50%); 
 
}
<div class="homepage"> 
 
    <h1>Another interactive design student.</h1> 
 
</div>
0123です

+0

ありがとう!出来た!私は初心者ですので、私は:after疑似要素については知らなかったのです。 – Catalina

関連する問題