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