イメージの中央に見出しを入れたい画像を置いて見出しをつけて、見出しにマイナスのマージンを付けようとするが、他の要素が上がってそれはこのように画像の中央に見出しを入れる方法
<div>
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image "
<h2>i want to put this heading in the center of the above image </h2>
</div>を悪く見えますか？
div {
background-image: url("https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg");
height: 300px;
position: relative;
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}<div>
<h2>i want to put this heading in the center of the above image </h2>
</div>@Downvoter？ – Swellar
いいえ、CSS内にないdiv内の画像として使用したい –
div上<h2>とposition: relativeでこの
.image {
position: relative;
float: left;
}
.image h2 {
position: absolute;
z-index: 2;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
}<div class="image">
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image " />
<h2>i want to put this heading in the center of the above image </h2>
</div>使用position: absoluteのようなものを試してみてください。このよう
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
margin: auto;
height: 20px;
}<div class="parent">
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image" />
<h2 class="child">i want to put this heading in the center of the above image </h2>
</div>私のデザインでは動作しません。 あなたのコードを適用すると、見出しがヘッダーになります。 また、div今度は中心に置くことができません –
特定のクラスにCSSを適用し、ジェネリックな 'div'と' h2'には適用しません。そうしないと、他のdivはここですべてのプロパティを継承するかもしれません。 – nashcheez
？
h2{
\t \t padding:20%;
\t }<body background="http://wallpapercave.com/wp/N3BgXEI.jpg">
<div>
<h2>I want to put this heading in the center of the above image </h2>
</div>
</body>他の方法はflexとbackground-imageを使用することです。
.bg {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("http://placehold.it/200x200");
background-repeat: no-repeat;
}<div class="bg">
<h1> TEXT </h1>
</div>私はhtmlでイメージとしてそれをしたい –
'背景image' – Swellar
使用位置として画像を設定する：あなたがダウン投票の理由をコメントすることができます絶対 –