Тег IFRAME, атрибут align

Атрибут align

Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается атрибутом align тега .

Синтаксис

Значения

absmiddle Выравнивание середины фрейма по середине текущей строки. baseline Выравнивание фрейма по базовой линии текущей строки. bottom Выравнивание нижней границы фрейма по окружающему тексту. left Выравнивает фрейм по левому краю окна. middle Выравнивание середины фрейма по базовой линии текущей строки. right Выравнивает фрейм по правому краю окна. texttop Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки. top Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

How to Center an iframe Horizontally? – HTML

An iframe, also known as an inline frame in HTML, is a frame embedded in an interface that looks like another screen or interface on an HTML document. In HTML, there is an iframe tag through which the iframes are created. When the iframe is created, it is, by default, displayed on the left side of the screen, but it can be moved and placed on the interface anywhere using the CSS style properties. To center the inline frame horizontally, the margin auto and display block properties are used.

Let’s understand this with a simple example.

Creating an iframe

Let’s discuss an example that creates a simple iframe through the iframe tag:

The above code contains “iframe” containing a link to the web page.

Simply creating an iframe with no CSS property applied to it will display the following results in the output interface. The iframe will be created but will be displayed on the left side by default:

Applying CSS Properties to Center the iframe

To move the iframe to the center, we need to apply the CSS properties on it. In the CSS style element, we simply need to first refer to the iframe and then add the margin auto and display block property:

In the above code snippet, there is a selector added to refer to the iframe, and inside the selector, there are the margin auto and display block properties that will move the iframe in the center horizontally.

The following will be the output interface after applying the properties:

This sums up how the iframe can be aligned to the center horizontally.

Conclusion

The iframe in HTML can be centered horizontally on a web page interface by adding the selector in the CSS style element referring to the iframe and then simply adding the CSS margin auto and display block properties for that iframe. This will place the inline frame in the center. This article explains well how to center the iframe horizontally.

About the author

Hadia Atiq

A Software Engineer and Technical Writer passionate about learning and spreading knowledge of the latest technology. I utilize my writing skills to help readers understand the importance and usage of modern technology.

Источник

Center an iFrame

If you’ve ever added an iFrame to a web page, you know how frustrating it can be to find that the content isn’t displaying how you want it to. Those familiar with HTML likely understand this struggle, as well as the desire to include iFrames in the first place.

If you aren’t familiar with iFrames, they are an HTML element that displays content from one web page onto another . You’ve probably seen an iFrame before while visiting a website, even if you didn’t know it. Many iFrames are ads that display information from the advertiser’s website. Others incorporate videos, posts, and even maps. Whether you edit HTML all the time or you’re just starting your coding journey, this article will teach you everything you need to know to center an iFrame.

First, we’ll explain in depth what an iFrame is and why you would want to center one. Then, we’ll cover some basics about HTML and how they use iFrames. Finally, we will walk you through the steps of centering an iFrame on your web page using the align attribute.

What Is an iFrame?

An iFrame is the abbreviated term for an Inline Frame. Inline Frames are HTML elements that can display other HTML elements as well as code from other websites like Facebook or YouTube. Put a little more simply, an iFrame is a window within a web page that allows you to view content from another web page. iFrames can be a great way to incorporate something into your web page quickly and easily. While they do require some HTML knowledge, they can be a very simple way to enhance your web page. Businesses especially can benefit from using iFrames within their website. iFrames instead of links or static images can make your business’s website look more professional. They can even be a source of revenue if used to display advertisements from other businesses.

iFrames can be used to incorporate ads , YouTube videos, social media posts, and even online maps into web pages. Using an iFrame includes this content directly on the web page, meaning that you won’t have to constantly update the information. Instead, it will automatically update alongside the source material. For example, using an iFrame to include a social media post gives readers access to the post directly. If the post is deleted, edited, or gains new interactions, the iFrame will reflect that. Screenshots may be able to show some information, but it won’t be as dynamic as an iFrame. A screenshot also won’t include a link to the content itself. Often, clicking on an iFrame takes you right to its source. One of the few downsides of an iFrame, however, is the fact that iFrames may lose access to content if it is deleted.

Why Would I Want to Use an iFrame on My Web Page?

iFrames enhance the overall appearance of your web page by giving users access to content directly. For example, YouTube videos embedded using iFrames play directly on the web page. There’s no need to wait for the web page to follow a link or go searching for the video. This way, readers can watch a video without having to leave your page. This can also cut down on loading time by including the video as a page within your page. The time it takes a page to load can seriously affect the amount of traffic a website gets .

Embedding things like Google Maps can provide directions easily without having to look them up. Since iFrames access other web pages directly, the directions will always be up to date. This can be a helpful addition to any web page that focuses on a specific location, like an article about a tourist attraction. Similarly, businesses may want to include a pin of their address in Google Maps on their website. Using an iFrame of Google Maps gives visitors the option to pull up directions quickly by clicking on the iFrame.

Center an iFrame

iFrames are meant to enhance a web page’s function and appearance, making it very important to incorporate them correctly. Your YouTube video or social media post may look odd if it’s not centered on a web page. Businesses especially need to consider the appearance of their website. Since content can significantly improve your website , you want to make sure it’s displaying correctly. Otherwise, your website may not look very professional or well-made. Luckily, centering an iFrame is simple. All you need is some surface-level HTML knowledge.

iFrame HTML

HTML, or Hypertext Markup Language , is the information that tells a web browser how to display a particular page of a website. It is made up of a long string of code that can be edited and changed by adding or deleting sections of code. These changes affect how the web page is displayed and its function.

HTML is made up of tags, elements, and attributes. Tags are the beginning and ending code around an element. They tell the web browser where an element starts and ends. This allows the element to be expressed properly and completely without it getting lost amongst other code. Elements are the structures that will be expressed in a web page. For example, iFrames are an HTML element. When placed between two tags, an iFrame element in an HTML code will display an iFrame on your website. Lastly, attributes affect how an element is displayed. These can affect size, position, or even include added text on images.

Editing the HTML code of a website changes its appearance and function. Editing HTML may involve an HTML editor like NotePad or KompoZer. In these editing programs, you can make changes to your HTML by editing its code directly. This is a great way to build or develop your website if you’re particularly tech-savvy. Editing your HTML yourself gives you the ability to include images , change text, and incorporate iFrames.

Using iFrame on Your Website

The first step to incorporating an iFrame into your website is finding the content you wish to display. If you’re looking to include a YouTube video, click the “share” button. This should provide you with a few options to share the video. Click on the option that says “embed” . Clicking this button will bring up the exact iFrame HTML text you’ll want to include. Now, all you have to do is copy and paste this information into your HTML. Similarly, social media posts will also have options to embed a post.

For other types of content, it might be easier to use a link to a website within your HTML. To incorporate this type of iFrame into your website, start by opening your preferred HTML editor. In your editor, find the code where you want to add your iFrame. Start by typing “

After you have included the source in quotes, include the height and width you want for the iFrame. The height and width of an iFrame is usually measured in pixels, but it can also be measured in percentages. Finally, close this iFrame tag by typing “iFrame>”. If you’ve done this correctly, you should have a successful iFrame displayed on your website! Now that you’ve established an iFrame, make sure it’s centered on your page.

iFrame Align Center

Centering an iFrame is a very important part of how your web page looks. It can be incredibly frustrating to go through the effort of creating an iFrame, only for it to be slightly off. Luckily, centering an iFrame is even easier than creating one from scratch! Like creating an iFrame, it requires that you edit your HTML.

Open up your HTML editor and find the iFrame you’re looking to center. Within the code for that iFrame, type “align=center”. This will tell your page to center the iFrame. You can also center the image by editing its height and width on the page. Again, these can be measured in pixels or percentages.

You can even align your iFrame differently if you don’t want it to be centered. Instead of center, type “left”, “right”, “bottom” or “top” after “align=”. Your iFrame will be placed accordingly based on this text. The tool used for this is called the “align attribute”. The align attribute makes changing your iFrame’s position very straightforward. While centering iFrames is great for important content, some iFrames like those used to display ads might be better suited on the side of a web page.

Centering iFrames

iFrames are a great way to blend content into your website, but getting it to look just right can be tricky. Simply open up the iFrames code and add “align=center” to the element. Now you can have more control over how your web page displays its content. The content displayed in iFrames can be a huge improvement to your web page’s overall look and function. Since iFrames serve as windows into another website’s information, your web page can put all kinds of important information in one place. Ads, videos, and maps can all be easily added to your web page through HTML.

FAQ:

• What is an iFrame?
• How to center an iFrame?
• What is HTML?
• How do I center embedded code?
• How do you center align in HTML?

Источник