整列オブジェクトとボタン

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のソリューションを使用できます。 <object>タグの

<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

私はデモ作成したあなたのオブジェクトとして幅

を幅 P にタグを与える：

<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

01、これを試してみてくださいを

<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

あなたはこのachiveするフレキシボックスを使用することができます：あなたは親要素の幅を指定した場合、それが正しく整列する

HTML

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

CSS

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

Answer 5

検索幅とコード次のように<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/