HyperText Markup Language, Cascading Style Sheets, and JavaScript

Question

HyperText Markup Language, Cascading Style Sheets, and JavaScript

In my div, I have a combination of icons and text. I'm trying to center only the text within the div, with two icons on the left and 4 to 5 icons on the right. Although I managed to position the icons correctly, I am having trouble aligning the text perfectly in the center of the div. I initially used padding as a temporary fix, but it doesn't provide consistent results across different resolutions.

Could someone please assist me in resolving this issue? I have attached an image showing that the text is not exactly centered in the div. I want the text to be precisely in the middle and maintain accurate alignment regardless of the resolution.

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

javascript html css

Answer 1

Answer №1

I'm not entirely clear on what you're looking for, but perhaps this will provide some guidance:

To achieve the desired layout, I am utilizing the flexbox property space-between to position the icons on the right and left while centering the text.

You can view the implementation in action here: https://jsfiddle.net/victor_allegret/o98oh3mo/

https://i.sstatic.net/54qx8.png

Answer 2

I'm not entirely clear on what you're looking for, but perhaps this will provide some guidance:

To achieve the desired layout, I am utilizing the flexbox property space-between to position the icons on the right and left while centering the text.

You can view the implementation in action here: https://jsfiddle.net/victor_allegret/o98oh3mo/

https://i.sstatic.net/54qx8.png

Answer 3

Answer №2

<div id="content">
    <p>This is some centered text with font awesome icons on the sides.</p>
</div>

<style>
#content { text-align: center }
#content p { float: left; }
#content i { float: right; }
</style>

Answer 4

<div id="content">
    <p>This is some centered text with font awesome icons on the sides.</p>
</div>

<style>
#content { text-align: center }
#content p { float: left; }
#content i { float: right; }
</style>

HyperText Markup Language, Cascading Style Sheets, and JavaScript

Answer №1

Answer №2

Similar questions

Leveraging the power of Auth0 and Prisma in aggregating user data

Creating a stylish background gradient between two handles on a jQuery Slider with CSS

Continuous Load More: Loads content infinitely until a page is fully loaded

URLs not being gathered by the web scraping tool

How can AngularJS utilize ng-repeat and ng-bind-html to display arrays of HTML strings?

Creating Sub Menu in Blogger with pageListJSON

24-hour countdown tool featuring a visual progress bar

My code gets disrupted when I use classes instead of IDs

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

Utilizing Bootstrap's Multi-Grid System

What is the best way to integrate an asynchronously initialized API with a Vuex state?

Displaying database values in an array within an HTML format

Integrating VueJs into a pre-existing .net core 5 project

What is the best method to locate a particular item using XPATH in case of duplicate values?

There is an issue with the project where main.jsbundle, Foundation, and Security are missing, resulting in

Error: React unable to locate module './WebpackMissingModule'

What is the best way to set up jest to generate coverage reports for Selenium tests?

Positioning Problems with Popups

Customizing TinyMCE's font style menu options

Tips for showcasing numerical values using radio buttons