对齐对象和按钮

以下是代码对齐对象和按钮

<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的宽度以居中按钮。