Center text and image within a button

Can anyone help me create a LIKE button that is aligned in the middle center with text and image? I'm struggling with responsiveness and it's driving me crazy.

I feel like I might be overcomplicating things. Can someone simplify it for me and make it scale with % for responsiveness?

This is what I envision: https://i.sstatic.net/oTJps.jpg
And this is what I currently have: https://i.sstatic.net/WSRSV.jpg

    .kom_augsha .treshais{
    width:15%;
    float:right;
    }
    
    .reitings{
      display:table;
      width: 100%;
      border: 1px solid #e9e9e9;
      
    }
    
    .rate {
      display: table-cell;
      text-align: center;
      vertical-align:middle;
      line-height: 1.5em;
    }
    
    .plus {
      background: white;
      color: green;
    }
    
    .minus{
      background: white;
      color: red;
      border-left: 1px solid #e9e9e9;
      padding-left:10px;
      text-align:center;
    }
<div class="treshais">
  <div class="reitings">
    <div class="rate plus"><img src="plus.jpg"/>83</div>
    <div class="rate minus"><img src="minus.jpg"/>9</div>
  </div>
</div>

Answer №1

Here is a helpful tip:

.rate img {vertical-align: middle;}

Answer №2

.stars img {
    align-items: center;
    display: inline-block;
}

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

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

Why is it not possible for me to choose an element after it has been placed within a grid component?

Struggling to eliminate the blur effect on an image inside a grid element? It seems modifying the properties of an element within a grid class is causing some issues. To simplify, I conducted a basic test: I managed to change the ppp2 class when hovering ...

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

Implementing a universal font-size adjustment feature according to user preferences

Is it possible to allow users to choose the font size for the entire application, offering three options: Big, Medium, Small? If a user selects "Big", all fonts in the application will be resized globally. I have spent time researching this issue but ha ...

Can jQuery and Google Analytics be loaded together in a single process?

My current setup includes the following: <script src="http://www.google.com/jsapi?key=..." type="text/javascript"></script> <script> //<![CDATA[ google.load('jquery', '1.6'); //]]> </script> &l ...

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

What is the reason behind Gmail altering the id attributes of certain elements?

Here we have a snippet from Gmail, showcasing the "Compose" button. Note the id, it starts as ":il" when there are no unread messages. <div id=":il" class="aic"> <div class="z0"> <div class="T-I J-J5-Ji T-I-KE L3" tabindex="0" role="button" ...

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

Moving from CSS to SCSS: Incorporating CSS files from npm packages - A Step-by-Step Guide

I am new to SASS and currently in the process of converting my existing project's CSS files to SCSS. I know that simply changing the extension to .scss will work for my custom files, but I'm not sure how to handle the dependency style files. I ty ...

Transforming a Java Array or Collection into a JSON array

After running my Java code, the returned Collection (ArrayList) produces JSON through JAXB that looks like: {"todo":[{"name":"CAMPBELL","sales":"3","time":"1331662363931"}, {"name":"FRESNO","sales":"2","time":"1331662363931"}]} However, I am wondering if ...

CSS positioning of a close button is vital for a seamless

My modal has a close button at the bottom, but its position seems to be shifting up and down based on the length of the comment section directly above it. I'm looking for a way to keep the close button fixed at the bottom regardless of the comment sec ...

Tips for Optimizing Navigation with Jquery Integration

I have implemented a dynamic navigation system using jQuery, where I load the navigation from a separate nav.html file to avoid updating it on every page manually. However, I am facing an issue with targeting elements in the loaded navigation to make them ...

Display elements exclusively when the class XY is in an active state using JavaScript

Hello everyone, I'm new to this platform and excited to share my first post. Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific fu ...

Displaying line breaks <br> on the browser when there are characters stored in the database

Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...

HTML div ID displaying incorrectly

My main div on the page has the attribute align="center", but it does not seem to align in the center. If you'd like to see the page for reference, click here. This is the CSS: #page{ background-color: #4C1B1B; width:85%; height:500px; ...

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

Tips for creating a button that maintains consistency across different screen sizes

One of the images linked below shows a button displayed on two different sized screens, one 24 inches and the other 13 inches. The button on the 24-inch display appears normal, while the "Add to Cart" button on the 13-inch display is broken. Check out th ...

Tips for concealing specific sections or content on a tab

I am looking to implement a layout with 4 tabs where the content of each tab is initially hidden and only becomes visible when that specific tab is clicked. For example, if the user clicks on the 1st tab, then the content associated with that tab should ...

Utilizing CSS attr() for setting the width dimension

I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it. What I'm attempting to do is use the attribute "prog" as th ...