CODEWITHSUNDEEP
htmlcsscss-positioncenter
user1611830
user1611830

Reputation: 4857

How can we center an iframe inside an absolute positionned div

I tried to put the iframe tag inside an a tag and set its css to text-align:center, but it didn't work

Edit Sorry, I mislead I have an 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>

the div is itself centered and has class 

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

Upvotes: 1

Views: 1679

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157314

a is an inline element, you need to make a block level element, as it is inline, your img has no space to get centered, so make it block or inline-block and than use text-align: center; for a

Demo

Note: If you are using block it will take up 100% space, if you are using inline-block; you NEED to specify some width to the element, else it's of no use

As you updated your question, here's a new demo

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Not knowing your CSS code can only make me guess it.

An a tag is an inline element which will only take the width that it needs. So when adding an image to it, the width will be as width as the image. The text-align: center does work, but you can't see it.

Changing your a to an (inline-)block can fix your problem, check this demo.

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

Upvotes: 0

Beniamin Szabo
Beniamin Szabo

Reputation: 1929

This code should solve your problem:

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

Upvotes: 0

Related Questions