この質問は既にここで何度も尋ねられていますが、私の答えは見つかりませんでした。センターテキストが画像の上に水平または垂直に反応します
画像上にテキストの一部（数単語のみ）を水平方向と垂直方向の両方に配置したいと考えています。
画像は背景画像ではなくimgタグである必要があります。
テキストは、ブラウザウィンドウのサイズを変更することによって、応答するように調整する必要があります。 （私は私のプロジェクトでは、ブートストラップ持つ）
an screenshot of desired layout
あなたは<figure>タグでそれを達成することができます
div {
position: relative;
width: 50%;
}
img {
width: 100%;
}
p {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
margin: 0;
}<div>
<p>ON SALE</p>
<img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
</div>このお試しください：...
これを試してみて、より多くのために、このリンクをチェックし
.parent {
position: relative;
}
img {
width: 100%;
}
.text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
margin: auto;
width: 20px;
height: 20px;
color: red;
}<div class="parent">
<img src="http://s3.favim.com/610/151107/art-black-and-white-geometric-minimal-Favim.com-3533393.jpg">
<div class="text">allo</div>
</div>これは、部分的に問題を解決し、テキストは固定 'height'＆'幅を与える@Fawadまだ垂直 –
を中心にではありませんhttps://jsfiddle.net/ev1cwp6q/ 'を上記のようにテキストに追加します。 – nashcheez
ありがとうございました問題を解決しました –
を。 .. https://css-tricks.com/text-blocks-over-image/
ここでは210#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
background: rgba(0, 0, 0, 0.8);
z-index:100;
position:absolute;
color:Yellow;
font-size:1.5em;
font-weight:bold;
left:150px; /* or in % */
top:150px;
}<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>リンクがありがとうございました –
@Fawadあなたは歓迎です –
^^行きます。私は通常、<figure>タグに<img>と<div>が含まれ、同じレベルにしたいというテキストを含むように設定します。
<figure>
<img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg">
<div class="info">
Content goes here
</div> <!-- /.info -->
</figure>
およびCSSので<figure>タグは、相対位置を有し、.infoはtop: 0; bottom: 0; left: 0; right: 0固定widthと絶対配置を有します。
figure {
margin: 3px;
display: inline-block;
position: relative;
}
figure .info {
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 300ms;
background-color: rgba(233,233,233, .8);
color: #333;
margin: 15px;
text-align: center;
}
は、ケースであなたがflexboxポジショニングで追加<div>を使用することができ.infoコンテナにテキストだけの1行以上を追加することもできます。
あなたは完全な例を見ることができるhere
変換：翻訳（-50％、-50％）;はSafari 8以下では動作しません。 – nashcheez
これをサポートしたい場合は、以下も含める必要があります。 -webkit-transform：translate（-50％、-50％）; –