如何把標題放在圖像的中心

我想把標題放在圖像的中心我試着放圖像然後標題然後給標題負邊距，但是當我這樣做時，其他元素上去，使它看起來很糟糕如何把標題放在圖像的中心

<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>

來源

2017-03-08 Ahmed AL-Dabagh

設置圖片爲背景' - image' – Swellar

使用的位置是：絕對 –

喜歡這個？

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>

來源

2017-03-08 09:46:36 Swellar

@Downvoter你能評論的向下投票的原因嗎？ – Swellar

不，我想它作爲一個圖像裏面的div而不是在css –

嘗試是這樣的

.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>

來源

2017-03-08 09:49:52

使用position: absolute上的div的<h2>和position: relative。

.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>

來源

2017-03-08 09:50:20 nashcheez

它不起作用在我的設計中我有一個標題當我申請你的代碼時，標題上升到標題，我也希望它的div在中心現在我不能把它放在中心 –

在特定的類而不是通用的'div'和'h2'上應用css，否則其他div可能繼承這裏的所有屬性。 – nashcheez

-1

喜歡這個？

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>

來源

2017-03-08 09:55:03 user7397787

另一種方法是使用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>

來源

2017-03-08 10:02:23 Plenarto

我希望它在html中的圖像 –

如何把標題放在圖像的中心

回答

相關問題