对齐对象和按钮

Question

代码

<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

Answer 1

如果你在父元素上指定了宽度，那么它将正确对齐。

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

Answer 2

给width to p标签作为对象 width

i have create demo:

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

Answer 3

试试这个，

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

Answer 4

您可以使用flexbox来实现这一点:

HTML

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

CSS

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

Answer 5

查找<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";
})

希望有帮助!

Answer 6

将它们都用div包起来，并将div的宽度设置为SVG的宽度，以使按钮居中。

.container {
  width: 500px;
}

https://jsfiddle.net/tug1hudo/