Question

我尝试将iframe标记放在a标记内并将其css设置为text-align:center，但它无法正常工作

编辑抱歉，我误导我有iframe

<div>
    <iframe type="text/html" width="640" height="360" src="https://www.youtube.com/..." frameborder="0" allowfullscreen=""></iframe>
    <button type="button">Ajouter la vidéo...</button>
</div>

div本身居中并具有类

width: 500px;
position: absolute;
top: 35%;
left: 30%;
margin-left: -200px;
z-index: 3;

Answer 1

a是一个内联元素，您需要创建一个block级元素，因为它是inline，您的img没有空间可以居中，所以make它block或inline-block而不是text-align: center;用于a

Demo

注意：如果您使用的是block，则会占用100％的空间使用inline-block;您需要为元素指定一些width，否则它是没用的

在您更新问题时，这是一个新的demo

Answer 2

此代码可以解决您的问题：

img{
  display: block;
  margin: 0 auto;
}

Answer 3

不知道你的CSS代码只能让我猜它。

a标记是一个内联元素，它只占用所需的宽度。因此，在向其添加图像时，宽度将与图像一样宽。 text-align: center确实有效，但你看不到它。

将a更改为（内嵌）块可以解决您的问题，请查看demo。

.imgLink {
    display: inline-block;
    width: 200px;
    text-align: center;
}

我们如何将iframe置于绝对定位的div中

3 个答案: