Creating a Circular Design with Text at the Center Using CSS

Question

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this

https://i.sstatic.net/zQiF8.png

The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation.

Below is my HTML (angular):

// Icon component

<div>
    <i><ng-content></ng-content></i>
</div>

// Parent Component

<div>
    <p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>

// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i>OT</i>
       </div>
    </p>
</div>

Here is my CSS:

div {
    display: inline-block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
}

Any suggestions on how to achieve this?

html css angular

Answer 1

Answer №1

To vertically align the circle, include vertical-align: middle; in your CSS for the div i.

Here is the complete CSS:

div {
    display: inline-block;
}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
    vertical-align: middle;
}

Answer 2

To vertically align the circle, include vertical-align: middle; in your CSS for the div i.

Here is the complete CSS:

div {
    display: inline-block;
}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
    vertical-align: middle;
}

Answer 3

Answer №2

div {
    display: block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
}


i {
position: relative
}


i.one {
top:-15px;
}


i.two {
bottom:-15px;
}

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i class="one">OT</i>
       </div>
    </p>
</div>


<br/>
<br/>
<br/>
<br/>
<br/>

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i class="two">OT</i>
       </div>
    </p>
</div>

You have the ability to apply the CSS properties directly to the i element and adjust its positioning using top, left, right, and bottom properties.

Answer 4

div {
    display: block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
}


i {
position: relative
}


i.one {
top:-15px;
}


i.two {
bottom:-15px;
}

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i class="one">OT</i>
       </div>
    </p>
</div>


<br/>
<br/>
<br/>
<br/>
<br/>

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i class="two">OT</i>
       </div>
    </p>
</div>

You have the ability to apply the CSS properties directly to the i element and adjust its positioning using top, left, right, and bottom properties.

Creating a Circular Design with Text at the Center Using CSS

Answer №1

Answer №2

Similar questions

Can an excess of CSS impact the speed and performance of a website?

Utilize a singular loader when simultaneously making numerous HTTP requests in Angular with ngx-ui-loader

Challenges with Nested Reactive Form in Angular 4

Angular 2 Validation Customizer

Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

Elements with inline-block display not aligning horizontally next to each other

Develop a binary file in Angular

Sending checkbox selections to JavaScript

What is the process for incorporating JavaScript-generated coordination into an HTML form?

Is there a way to configure gulp-sass to compile the actual bootstrap CSS styles instead of just echoing the import statement?

Is it possible to utilize two ngForm elements within the same component in Angular 4?

Experience the thrill of success with a timed animation using Sweet Alert on the powerful Ionic framework

The date retrieved from the MySQL database is failing to show up properly in an HTML table even after applying the date_format

Steps to turn off the automatic completion feature for orders in WooCommerce on your WordPress website

Strategies for Returning Multiple Values from a Function in JavaScript

All browsers experiencing issues with autoplay audio function

jquery dialog box displaying a webpage

"Adjusting the Height of an MUI Autocomplete Input Field: A Simple Guide

Updating SVG colors using VueJS

The MSI installer for electron-builder is rejecting the asar file due to its excessive