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

将宽度添加到 p 标记作为对象宽度

我创建了demo：

＆＃13;

UPDATE  StudentMasters 
SET     StdName = LOWER(LEFT(StdName,1)) + SUBSTRING(StdName,2,LEN(StdName)) 
WHERE   LEFT(StdName,1) =  UPPER(LEFT(StdName,1)) COLLATE Latin1_General_CS_AI

＆＃13;

Answer 2

试试这个，

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

您可以使用flexbox来实现此目的：

HTML

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

CSS

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

Answer 4

如果在父元素上指定宽度，则它将正确对齐。

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

对齐对象和按钮

6 个答案: