對齊對象和按鈕

以下是代碼對齊對象和按鈕

<object id="conv1" type="image/svg+xml" data="conv1.svg"></object> 
<p align="center"> 
<button><span>Play/Replay</span></button> 
</p>

我要對齊的按鈕中心相對於對象。這怎麼可能實現？如果我嘗試對齊按鈕中心，它將與頁面對齊。這是網站鏈接。 http://mathsbeauty.esy.es/temp2.html

來源

2016-10-27 mathsbeauty

歡迎計算器。請閱讀我們的[問]頁面提示如何改善此問題。對於初學者，請在您的問題中添加一個[mcve] – ochi

如果您指定的父元素的寬度，然後它會正確對齊。

<div style="width: 504px;"> 
    <object id="conv1" type="image/svg+xml" data="conv1.svg"></object> 
    <p style="text-align: center;"> 
    <button><span>Play/Replay</span></button> 
    </p> 
</div>

如果您無法指定寬度，那麼您可以使用@Lahiru Ashan的解決方案。如果你仍然需要到左對齊的內容，那麼你可以添加以下內容：

<div style="text-align:center; float: left;"> 
    <object id="conv1" type="image/svg+xml" data="conv1.svg"></object> 
    <p><button><span>Play/Replay</span></button></p> 
</div>

來源

2016-10-27 05:55:41 neil

看起來我輸入的速度很慢@如果Flexbox是您的選擇，那麼Ingvi的解決方案將是我最喜歡的解決方案。 – neil

您的解決方案效果很好...！ – mathsbeauty

給寬度到p標籤爲您對象寬度

我已創建演示：

<div style="width:504px;height:458px;background-color:red;"> 
 
</div> 
 
<p align="center" style="width:504px;"> 
 
    <button><span>Play/Replay</span> 
 
    </button> 
 
</p>

來源

2016-10-27 05:46:50 chirag

試試這個，

<div style="text-align: center;"> 
    <object id="conv1" type="image/svg+xml" data="conv1.svg"></object> 
    <p align="center"> 
    <button><span>Play/Replay</span></button> 
    </p> 
</div>

來源

2016-10-27 05:49:04

您可以使用Flexbox的來實現這一目標：

HTML

<div class="container"> 
    <object></object> 
    <button></button> 
</div>

CSS

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

來源

2016-10-27 05:55:10 Ingvi

查找寬度<object>標籤和<p>標籤的樣式應用於寬度爲下面的代碼。

$(document).ready(function() { 

    var width = document.getElementById('conv1').offsetWidth 
    var p=document.getElementsByTagName('p'); 

    //use index as per `p` tag position in your html. 
    p[0].style.width = width+"px"; 

})

希望有幫助！

來源

2016-10-27 06:03:14 Satendra

老實說，不認爲你需要jQuery來解決佈局問題.. – PaulBGD

感謝PaulBGD指出這一點，你是對的，但它取決於情況，它是可能的解決方案之一。 – Satendra

將它們兩個都用div包起來，並將div的寬度設置爲SVG的寬度以居中按鈕。