用CSS連接「div」和「p」

我想將「p」中的文本放到我的「div」的中心。我的html是這樣的：用CSS連接「div」和「p」

<div class="picture"> 
    <img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image"> 
</div> 
<p class="textik"">Hello handsome.</p>

但我不能改變html標籤。我只能使用CSS。有沒有辦法做到這一點？我嘗試了一些方法，但似乎沒有任何工作。

來源

2016-04-28 RadoInko

沒有，就沒有辦法使用CSS重組HTML。您可以將文本居中放置在「p」標籤中，但不能將「p」標籤移動到「圖片」div中。 – APAD1

這類事情對於jQuery來說是微不足道的，應該是可用的。 – isherwood

在不改變HTML的情況下做到這一點的唯一方法就是將div標籤上方的p標籤人爲地對齊。

p.textik { 
    margin-top: -5px; 
}

根據需要調整並測試移動設備。

如果您不想讓底下的元素向上移動，則可以使用填充底部來防止這種情況發生。

p.textik { 
    padding-bottom: 5px; 
}

來源

2016-04-28 15:23:43 Goose

是的，這是有效的，但是這兩者之下的所有其他元素也都移動了。 – RadoInko

@RadoInko我認爲這將是預期的行爲，如果p實際上也在div中，會發生什麼。你可以使用'padding-bottom'來達到這個目的。我將編輯以反映這一點。 – Goose

非常感謝，很好的簡單的解決方案。 – RadoInko

我假設你真的想使p標籤出現在圖像的中心，所以你可以absolute放置它，改造它的使用CSS的位置。通過使用absolute定位和轉換位置，如果圖像/外部元素的大小發生更改，則不需要重新定位。喜歡的東西：

<div class='someOuterElement'> 
    <div class="picture"> 
    <img src="http://placehold.it/500/500" width="500" height="500" > 
    </div> 
    <p class='textik'>Hello handsome.</p> 
</div>

和風格它：

.someOuterElement { 
    position: relative; 
    width: 500px 
} 

.textik { 
    text-align; center; 
    position: absolute; 
    top:50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
}

有一個關於CSS的更多信息變換here

來源

2016-04-28 15:26:40 atmd

這看起來不錯，它也沒有搞亂其他元素。我會做一些測試，但看起來不錯，謝謝！ – RadoInko

沒問題，很高興我能幫到 – atmd

爲什麼它不是最好的安娜？它的工作原理：D謝謝！ –

用CSS連接「div」和「p」

回答

相關問題