jquery - How to align an iframe horizontally (in the centre of the screen) with CSS? -


i'm embedding youtube video inside iframe, put inside div. problem i'm dealing right can horizontally align (in centre) text not iframe.

this code used make this:

html

<div id="box-logo">     <img src="content/media/red_package.png" />     <span>quem somos?</span>      <iframe src="https://www.youtube.com/embed/uz0d_oerfau?autoplay=1"             frameborder="0"             allowfullscreen></iframe> </div> 


css

#box-logo { margin-top: 40px; text-align: center; }  #box-logo img {     background-color: red;     border: 5px solid red;     border-radius: 50%;     width: 40px;     height: 40px; }  #box-logo span {     color: red;     font-family: calibri;     font-size: 24px; }  #box-logo iframe {     display: block;     width: 895px;     height: 435px; } 

i've been searching multiple tips , could't find 1 solve problem.
i'd gladly hear suggestions in order try them out!

thanks in advance,
granvic

you must set margin of #box-logo iframe 0 auto.

this because have element display property set block, takes entire line. set width determinate amount of px there free space in line. setting margin: 0 auto indicating free space must divide equally each side of div.

in case have iframe display property set inline or inline-block wouldn't work. div centered, in situation, should apply text-align: center #box-logo

here have fiddle: https://jsfiddle.net/g2s384l2/


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -