What is the best way to center a CSS arrow vertically within a table cell?

I'm having trouble with aligning a CSS arrow next to some text inside a table cell...

<td><div class="arrow-up"></div> + 1492.46</td>

My goal is to have the arrow positioned to the left of the text and centered vertically within the cell. I've attempted styling the arrow as follows...

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

Despite my efforts, the arrow continues to be misplaced above the text -- https://jsfiddle.net/s8e5k3st/. Any advice on achieving the correct alignment would be greatly appreciated.

htmlcsshtml-tablealignmentvertical-alignment

Answer №1

To make the arrow-up class inline-block, simply include display:inline-block;.

.arrow-up {
  display:inline-block; /* This line */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

Updated JSFiddle link

Answer №2

Consider this alternative solution using Font Awesome

<i class="fa fa-caret-up fa-lg" aria-hidden="true"></i>

#currencyTable {
  display: inline;
  width: 80%;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row {
  min-height: 30px;
  border-bottom: 1px solid #C7CDD1;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row td {
  padding: 12px 0 12px 0;
}

.currency-row td:first-child {
  padding-left: 10px;
}

.currency-row td:last-child {
  padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="currencyTable">
  <table width="100%">
    <tr>
      <th>Currency</th>
      <th>Price</th>
      <th>1d Change</th>
      <th>1w Change</th>
      <th>1y Change</th>
      <th>% Index Market Cap</th>
    </tr>
    <tr class="even currency-row">
      <td>Bitcoin</td>
      <td>2727.74 USD</td>
      <td><i class="fa fa-caret-up fa-lg" aria-hidden="true"></i> + 1492.46</td>
      <td></td>
      <td></td>
      <td><i class="fa fa-caret-down fa-lg" aria-hidden="true"></i> 53.89 %</td>
    </tr>
  </table>
</div>

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

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

I am a beginner in the world of coding. Currently, I am working on creating templates for an online software application. Users will have the option to select from different choices using radio buttons. However, I want to ensure that users are not redirect ...

javascripthtml

The justify-position attribute does not have any impact on the positions that are set

Here is the JSX code that resembles HTML but uses ClassName instead of class: <div className="snavbarcontainer"> <div className="toplefticon"> <a class="test" href=" ...

htmlcsssass

How can I create a fixed class="form-row" and align a label and textbox in a horizontal line?

I encountered an issue with my simple bootstrap form that contains the following fields: The Labels and text box are not aligned properly in a straight line. When adjusting the size of the Notes field, it affects the positioning of the other fields causin ...

htmlcssformstwitter-bootstrapbootstrap-4

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

There is a space separating the slider image and the navigation bar

Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have ...

htmlcss

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

How can I implement a Dynamic Input field using Angular?

Suppose there is an input field where a user enters an ID. Once the user clicks the "add" button, I need to send a request to my server to fetch a "name". Afterwards, I want to disable the text input field, hide the "add" button, and show a number input fi ...

javascripthtmlangularjsangular-ui

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

javascriptjqueryhtml

Organize Radio Selectors

My intention was to align the radio buttons as shown in the image below: https://i.stack.imgur.com/oPTjD.jpg However, the final result looked like this https://i.stack.imgur.com/Mixga.jpg Below is the code for your reference HTML <div class="form ...

htmlcssangular

Using sandboxed iframes in HTML for secure `src` loading on Internet Explorer 11 and Microsoft Edge

Is there a way in IE11/Edge with HTML5 to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML without using a src url? I am searching for a solution similar to srcdoc that is compatible with all other modern browsers. Attempting ...

htmliframeinternet-explorer-11sandboxmicrosoft-edge

Unique lightbox effect with multiple layers

Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Althou ...

jqueryhtmlcss

To access the link, simply click once if there is no child menu. However, if there is a child menu attached, be sure to click

I am working on a mobile menu that is designed to slide out when clicked. Currently, the parent pages are displayed by default. I want to implement functionality where if a parent page has child pages, clicking on it will slide down the sub menu. If click ...

javascriptjqueryhtmlcss

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

javascriptjqueryhtmlcss

How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined. An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is includ ...

cssangularjs

Center an image and superimpose text in the middle of the webpage

I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image. &l ...

htmlcss

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

cssinternet-explorer

Why is the session variable in PHP failing to store the value?

Could you assist me with the following PHP code snippet? I'm trying to ensure that when the update function is called, the session variable 't' increments its value. However, every time I run the code, the output remains at Value: 1. What ad ...

phpjqueryhtml

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

htmlcss

Type the vinculum symbol above a number using HTML

As a Blogger, it is crucial for me to be able to write bars above numbers. Despite numerous searches on Google, there seems to be a lack of articles addressing this specific need. Most of the resources available focus on putting bars above letters or tex ...

html