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
Post a Comment