Aligning object and button - html

Question

The following is the code
<object id="conv1" type="image/svg+xml" data="conv1.svg"></object>
<p align="center">
<button><span>Play/Replay</span></button>
</p>
I want to align the button center with respect to object. How could that be achieved?
If I try to align the button center, it gets aligned with respect to page.
Here is the website link.
http://mathsbeauty.esy.es/temp2.html

Answer 1

If you specify a width on a parent element then it will align correctly.
<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>
If you are not able to specify a width then you could use the #Lahiru Ashan's solution. If you still require the contents to be left aligned then you could add the following:
<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

give width to p tag as your object width
i have created 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

Try this,
<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

You can use flexbox to achive this:
HTML
<div class="container">
<object></object>
<button></button>
</div>
CSS
.container {
display: flex;
flex-direction: column;
align-items: center;
}

Answer 5

Find width of <object> tag and apply width in style of <p> tag as below code.
$( 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";
})
hope that help!

Answer 6

Wrap both of them with a div and set the div's width to the SVG's width to center the button.
.container {
width: 500px;
}
https://jsfiddle.net/tug1hudo/