Icons positioned centrally while floating to the left

There seems to be an issue with centering the icon

CSS:

.icons .overview {
    position: relative;
    float: left;
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;
}

.icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    cursor: help;
    margin-bottom: 20px;
}

Also, I am facing a problem with the team alignment.

.team-list { text-align: center; padding: 50px 0px 30px; float: left;}

I am struggling to get things centered properly.

Check out the website here: under the category "Oferta" Any suggestions on how to fix this?

htmlcssweb

Answer №1

Avoid using the float property for list elements, instead use display: inline-block.

.icons .overview {
    display: inline-block;
    overflow: visible;
    position: relative;
    width: 16.6667%;
}

Answer №2

Consider adding a margin-left style rule to your summary element.

.symbols .summary {
    position: absolute;
    float: right;
    width: 20%;
    text-align: center;
    overflow: visible;
    margin-left: 70px;
}

Answer №3

To correct the alignment issue in your responsive layout, simply substitute "float:left;" with "display:inline-block;". Specifying a specific margin for alignment can cause problems in responsiveness.

Update your code to:

.icons .overview {
    position: relative;
    display:inline-block; /*UPDATED*/
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;
}

This adjustment should fix the problem you are experiencing!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to position the newest messages at the bottom of the list

I'm working on creating a web chat system similar to IRC where the latest messages should always be at the bottom of the chat window. Below is my attempt, but unfortunately it's not working as expected: ...

htmlcsschat

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

phpjqueryhtmlmysqlajax

What is the best way to horizontally center an absolute button within a div?

I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach: .mc-item { background: #F0F0F0; border: 1px solid #DDD; height: 1 ...

htmlcsstwitter-bootstrapbootstrap-4

css center arrow-aligned underline text

Trying to emphasize my text with an additional arrow centered on the line is proving to be a challenge. When attempting this, the text does not align in the center of the page. .souligne { line-height: 17px; padding-bottom: 15px; text-transform: u ...

csstextunderline

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

angularjs: hide div based on text entered in textfield

Is there a way to hide a div (with the class "card") until the user inputs text into the textfield in an AngularJS application? I believe the solution involves using ng-show, but I'm unsure of how to implement this functionality. Any assistance would ...

javascripthtmlcssangularjs

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

javascriptjqueryhtmlcss

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

javascripthtmlreactjsfrontend

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

Having trouble retrieving accurate text information from a JavaScript link

I am encountering an issue with my code which consists of links with divs inside them. When I click on a link, it should display another div with data for "Case No" and "Type". However, the problem is that it only fetches the data from the first link click ...

javascripthtml

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

javascriptjqueryhtmlcsshtml-framework-7

Tips for efficiently webscraping multiple pages with Beautiful Soup

I have been running my web-scraping script for quite some time, but it seems to be stuck on scraping only one URL. I intend to scrape five different URLs, and I am wondering if the issue lies with my loop getting stuck in an infinite loop. Furthermore, I ...

pythonhtmlloopsweb-scrapingbeautifulsoup

I'm struggling to convert this vertical navigation bar into a horizontal layout using CSS

<nav class="navbar navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="#">I/H</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> ...

htmlcsstwitter-bootstrapbootstrap-4

What causes discrepancies between jQuery set attributes and .html() output?

In an attempt to set attributes on HTML snippets, I am aiming to repopulate a form with previously entered values. Despite using .attr() to set the attributes, they do not appear after using .html(). For reference, I have provided a simple example here: h ...

javascriptjqueryhtml

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

`No valid form submission when radio buttons used in AngularJS`

Within my form, I have a single input text field that is required (ng-required="true") and a group of radio buttons (each with ng-model="House.window" and ng-required="!House.window"). Interestingly, I've discovered that if I select a radio button fir ...

javascripthtmlangularjs

What is the best way to interact with the dynamic Twitter follow button using Selenium and Python?

Trying to interact with Twitter's follow button can be challenging, especially when it is dynamic and has attributes that are not well-documented in the Selenium documentation. Below is a snippet of the HTML code for the button: Below you will see my ...

pythonhtmlselenium

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

I'm working with Laravel and trying to display data from a query in an HTML table. The table contains columns such as id, user, and shift. There are around 100 entries, with the shift column containing values like A, B, C, or D. My goal is to organize ...

phphtmllaravelhtml-table