テキストをセンタリングされた画像の下に配置するにはどうすればいいですか？

イメージを背景にして別のイメージ（ロゴ）をページ中央に配置した反応性の高いWebページを作成します。テキストをセンタリングされた画像の下に配置するにはどうすればいいですか？

問題は、タイトルが付いた中央の画像（ロゴ）のすぐ下にテキストを配置したいということです。私はパディングトップを使用してそれを入れようとしましたが、それは非効率的であり、あまり反応しません。

テキストをセンタリングされた画像の下に応答的に配置したいと思います。

ここに私のコードです。

@font-face { 
 
    font-family: 'Raleway'; 
 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
p { 
 
    font-family: 'Raleway'; 
 
    color: white; 
 
    text-align: center; 
 
    padding-top: 60% font-size: 17px; 
 
} 
 
img.ri { 
 
    position: absolute; 
 
    max-width: 40%; 
 
    top: 10%; 
 
    left: 10%; 
 
} 
 
img.ri:empty { 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
@media screen and (orientation: portrait) { 
 
    p { 
 
    font-family: 'Raleway'; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    padding-top: 65% 
 
    } 
 
    img.ri { 
 
    max-width: 75%; 
 
    } 
 
} 
 
@media screen and (orientation: landscape) { 
 
    img.ri { 
 
    max-height: 85%; 
 
    } 
 
}

<body> 
 
    <img class="ri" src="assets/image/logo.png"> 
 
    <p>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 
</body>

出典

2016-07-25 Idham Choudry

を試してみてください。あなたが望むようにうまくいきます。 – Developer

はこれを試してみてください、私はこれが何をしたいと思います。

div e.g: <div class='wrapper'>にlogoとtextをラップし、このクラスにCSSを適用してください。ここ

CSS

.wrapper { 
    width:100%; 
    text-align:center; 
    padding-top:15%; 
    position:relative; 
}

は変更スニペット

@font-face { 
 
    font-family: 'Raleway'; 
 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
    overflow:auto; 
 
} 
 
.wrapper { 
 
    width:100%; 
 
    text-align:center; 
 
    top:30%; 
 
    position:relative; 
 
} 
 
p { 
 
    font-family: 'Raleway'; 
 
    color: black; 
 
    text-align: center; 
 
    font-size: 17px; 
 
margin-top: 5px; 
 
max-width: 70%; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 
img.ri { 
 
    max-width: 40%; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <img class="ri" src="http://dummyimage.com/200x200/3498db/fff"> 
 
    <p>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 
    </div> 
 
</body>

出典

2016-07-25 09:05:00

これは機能しません。上部の画像とテキスト間のギャップが広すぎます。 –

okです。 –

また、画像が反応します。 –

これを試してみてください。

<body>  
<figure> 
<img class="ri" src="assets/image/logo.png"> 
<figcaption>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</figcaption> 
</figure> 
</body>

出典

2016-07-25 09:03:14 khushal

nopeは機能していません。テキストは画像の下にない中間の部分に残ります。 –

.member { 
 
    display: inline-block; 
 
    width:31%; 
 
    vertical-align: top; 
 
    text-align:center; 
 
    position:relative; 
 
} 
 
.name { 
 
    display: inline; 
 
} 
 
.member img { 
 
    width: 100%; 
 
    display: block; 
 
}

<div id="design-cast"> 
 
    <h4>Design</h4> 
 

 
    <div class="member"> 
 
     <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" /> 
 
     <div class="name">Name Description</div> 
 
    </div> 
 
</div>

あります

出典

2016-07-25 09:05:44 Developer

イメージは中央にもありません –

私はあなたがこのような何かをしたいと思い、私の更新の答えをチェックしFiddle

@font-face { 
 
    font-family: 'Raleway'; 
 

 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 

 
html, body{ 
 
    margin:0; 
 
    height:100%; 
 
    overflow:hidden; 
 
} 
 

 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
p{ 
 
    font-family: 'Raleway'; 
 
    color:#000; 
 
    text-align: center; 
 

 
    font-size: 17px; 
 
    
 
} 
 

 
.center 
 
{ 
 
left:0; 
 
right:0; 
 
top:0; 
 
bottom:0; 
 
margin:0 auto; 
 
position:absolute; 
 
position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<body> 
 
<p class="center"> <img class="ri" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><br>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 

 

 
</body>

出典

2016-07-25 09:15:04

イメージは反応しません –

ブートストラップを使用してレスポンシブイメージを作成するか、CSSでパーセンテージを与えることができます –

イメージに問題があります –

テキストをセンタリングされた画像の下に配置するにはどうすればいいですか？

答えて

関連する問題