In my table, I have a Font Awesome icon that I'm trying to align left with text and center the icons. I attempted to center the <i> element but it didn't work as expected:
Here is the HTML code:
<td><i class="icon-ok"></i></td>
And here is the CSS code:
td, th {
text-align: left;
}
td i {
text-align:center;
}
You can view the jsFiddle for reference.
I also attempted to use text-align:center !important; but it still didn't work. What am I doing wrong?
Create your own unique spin on the font awesome style
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
combined with
td i {
text-align:center;
}
will center only the icons.
To center the icon, apply text-align: center; to the block container (the <td>) - remember, text-align only works on block containers, not inline elements:
td {
text-align: center;
}
Check out this demo for reference: http://jsfiddle.net/kB6Ju/2/
Assign a specific class to your table cell that includes an icon
<td class="icon"><i class="icon-ok"></i></td>
Afterwards
.icon{
text-align: center;
}
After searching for a solution, I found the perfect fix:
<div class="d-flex justify-content-center"></div>
I am utilizing Bootstrap along with Font Awesome icons.
If you are interested in learning more, check out the following link: https://getbootstrap.com/docs/4.0/utilities/flex/
To achieve the desired result, you can utilize attribute selectors in your code. Below is the additional code snippet that needs to be included:
tr td i[class*="icon"] {
display: block;
height: 100%;
width: 100%;
margin: auto;
}
You can view the updated jsFiddle example by following this link: http://jsfiddle.net/kB6Ju/5/
Although it may seem like a dated topic, it still remains relevant and appears at the top of search results:
Currently, you have the option to include an additional class fa-fw in order to designate fixed width.
For example:
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
Instead of adding a class to cells with icons, consider wrapping the content of non-icon td in a span:
<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>
Then apply this CSS:
td {
text-align: center;
}
td span {
text-align: left;
display: block;
}
Normally I wouldn't provide an answer like this, but it seems too lengthy for a comment.
When dealing with icons grouped in an icon stack, utilize the code snippet provided below:
.icon-stack{ padding: 10px; display: inline-block; }
To address this issue, you can utilize the margin property. Personally, I found that setting the margin to 3 pixels resolved the issue for me. Here is an example:
<i class="fas fa-file-upload" style="margin: 3px;">
Keep in mind that 3 pixels may not be sufficient for your specific situation, so I recommend conducting some tests.
Disclaimer: I am implementing this within a flex element, therefore the behavior in a table might differ.
I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution. jsFiddle ...
The design of Eclipse's rounded and/or swooshing tabs is starting to feel outdated in today's modern era. I thought that by adding the following line in my default.css file, I could get rid of the rounded corners: swt-corner-radius: 0px Howeve ...
Although I have already looked at this Stack Overflow question, it did not provide the solution I am seeking. As a Java Web Developer, I have been utilizing Less for my CSS pre-processing needs. However, I am now interested in transitioning to Sass due to ...
I'm currently working with Bootstrap 4 and I am utilizing a card div. The card uses display flex and I am having trouble floating images within it, possibly because the card is configured to only allow one image. How can I successfully float multiple ...
I am currently facing an issue with positioning elements in my HTML code. I have a File drop-down that I want to display on the left side, while the rest of the drop-downs should appear on the right side. It seems like my CSS files might be causing some in ...
UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...
I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...
Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...
In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...
Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...
Attempting to eliminate the 'Edit Translation' text provided by Transposh to maintain the existing translations. Implementing CSS code like so: #transposh-3:nth-child(8){display:none;} and localizertextnode{display:none;} However, these styl ...
I am in the process of updating my website layout from an old version marked by Old HTML, which can be found at JFiddle: https://jsfiddle.net/LybeppL3/11/ The new version I am working on, known as Current Code: https://jsfiddle.net/5c2sm9s1/23/ OR at Pree ...
Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...
How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...
I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...
Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...
I'm working on implementing a sidebar shrink effect when collapsing it using a combination of custom CSS, jQuery, and Bootstrap. The custom CSS and jQuery handle the shrinking effect, while Bootstrap is used for styling purposes. However, I am facing ...
Currently, I am working on a WordPress website and I am trying to figure out how to change the CSS color of a side navigation element when a remote image is hovered over. In a typical scenario, I would accomplish this using CSS by assigning a hover class ...
Looking to eliminate the extra space at the top of this particular website. After attempting to use firebug, I still can't pinpoint the source of this unwanted spacing. Your guidance would be greatly appreciated. Thank you! ...
Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...