Aligning Objekt und Taste

Question

Im folgenden ist der Code

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

ich die Taste Mitte in Bezug ausrichten möchten zu widersprechen. Wie könnte das erreicht werden? Wenn ich versuche, die Tastenmitte auszurichten, wird sie in Bezug auf die Seite ausgerichtet. Hier ist der Link zur Website. http://mathsbeauty.esy.es/temp2.html

Answer 1

Wenn Sie eine Breite auf einem Elternelement angeben, dann wird es richtig auszurichten.

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

Wenn Sie keine Breite angeben können, können Sie die @Lahiru Ashan-Lösung verwenden. Wenn Sie immer noch die Inhalte verlangen nach links ausgerichtet werden, dann können Sie den folgenden hinzu:

<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

geben Breite zu p Tag als Objekt Breite

i Demo erstellt haben:

<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

können Sie Flexbox verwenden, um dies zu achive:

HTML

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

CSS

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

Answer 5

Suche Breite von <object> Tag und gelten Breite in der Art von <p> Tag wie unten 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"; 

}) 

hoffe, dass helfen!

Answer 6

Wickeln Sie beide mit einem div und setzen Sie die div's Breite auf die SVG-Breite, um die Schaltfläche zu zentrieren.

.container { 
    width: 500px; 
} 

https://jsfiddle.net/tug1hudo/