Horje
Semantic-UI Advertisement Centered Variation

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about Advertisement Centered Variation.  

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

An ad displays third-party promotional content and it can appear centered.

Semantic-UI Advertisement Centered Variation Class:

  • centered: This method is used to make centered space for ad.

Syntax:

<div class="ui centered banner test ad"></div>

The below example illustrates the Semantic-UI Advertisement Centered Variation:

Example 1:

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Semantic UI</title>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">GeeksForGeeks</h1>
         <h2>Semantic UI Advertisement Centered Variation</h2>
      </center>
      <div class="ui centered banner test ad"></div>
   </body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Semantic UI</title>
      <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">GeeksForGeeks</h1>
         <h2>Semantic UI Advertisement Centered Variation</h2>
      </center>
      <div class="ui centered banner test ad"></div>
      GeeksForGeeks is best place to learn DSA.
      <div class="ui centered banner test ad"></div>
   </body>
</html>

Output: 

Semantic-UI Advertisement Centered Variation

Semantic-UI Advertisement Centered Variation

Reference: https://semantic-ui.com/views/advertisement.html#centered


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Header Types Semantic-UI Header Types
Semantic-UI Input Transparent Variation Semantic-UI Input Transparent Variation
Semantic-UI Advertisement Test Variation Semantic-UI Advertisement Test Variation
Semantic-UI Search Aligned Variation Semantic-UI Search Aligned Variation
Semantic-UI Sidebar Width Variation Semantic-UI Sidebar Width Variation

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 8



 

Horje