Text and Arrow Alignment (Using Google Fonts)

How can I align both the text and the right arrow in the middle of the div using Google fonts? I have tried various methods but haven't been successful.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;">&#xe315;</span>
</div>

<div style="padding-left:20px; padding-right:20px;">
Some Text
</div>

</div>

htmlcss

Answer №1

To adjust the spacing of the text, you have two options. You can add a CSS rule margin-top: 7px to the text element, or set the line-height property to match the height of the container minus the icon height. In this case, let's go with 34px:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;">&#xe315;</span>
</div>

<div style="padding-left:20px; padding-right:20px; line-height: 34px;">
Some Text
</div>

</div>

I hope this explanation is helpful for you! :)

Answer №2

To vertically center the arrow, you can apply absolute positioning along with 

top: 50%; transform: translateY(-50%);
.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block; position: relative;">
  <span class="material-icons" style=" font-size:2rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);">&#xe315;</span>
  <div>
    Some Text
  </div>
</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

`There seems to be an issue with displaying Fontawesome icons`

Having some trouble with using Fontawesome 5 icons, my kit is from version 4 so I'm not sure if that's the issue. Any suggestions on how to fix this? <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, ini ...

htmlcssicons

Adjust the size and position of the text input field

I'm struggling to find a way to both resize and move the box without one action interfering with the other. Whenever I attempt to change the size of the box, it triggers the move event at the same time. Clicking on the box should make it resizable, bu ...

javascripthtmlcss

Having difficulty in sorting price data using PHP and AJAX

Having trouble sorting data from a sql database based on price in both Low to High and High to Low orders. I've attempted the code below, but it's not properly sorting by ASC or DESC Encountering a Syntax error or access violation despite trying ...

phphtmlsqlajaxsorting

What is the best way to stop the content in :after from wrapping onto the following line?

How can I add a divider "/" after each li element in my Bootstrap-based menu without it wrapping to the next line? The code I am using can be found here: http://jsfiddle.net/zBxAB/1/ I have tried using inline-block to prevent the slash from wrapping, but ...

htmlcsstwitter-bootstrap

How can an Angular 4 HTML for loop display a loosely typed object (string) normally but behave differently when the element is extracted directly?

Currently, I am utilizing Angular 4 to create an application that primarily involves presenting data from a database and performing CRUD operations. In my experience with Angular 4, I have noticed that the component's HTML does not handle loosely-typ ...

htmlangularjstypescript

Guide to executing multiple AJAX requests within a single Django view

As I develop my personal spending diary, I encountered a dilemma. To enhance the user experience, I aim to streamline the process of adding new items without refreshing the page. Although I created a single ajax form, I now realize the necessity for two ...

javascriptpythonhtmldjangoajax

Updated: "Adjust the preserveAspectRatio attribute in the SVG element within the Lottie player"

I have successfully incorporated a lottie json file using the lottie player. Unfortunately, I do not have access to the SVG file itself, only the json file. My goal is to modify the preserveaspectratio attribute of the SVG to xMinYMax meet instead of xMi ...

javascripthtmllottie

Choosing colors for Font Awesome icons

Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...

cssfont-awesome

Using a single jQuery script, implement multiple modals on a webpage that are responsive on both desktop and mobile devices

My Modal is functioning well on desktop, but I'm facing an issue on mobile where the screen doesn't close when clicking outside the modal area. Is there a way to solve this for mobile without adding the 'X' button to close it? I attem ...

jqueryhtmlcssmodal-dialog

What is the best way to create multiple PDF pages using mpdf1?

Currently using mpdf1 and looking to generate a PDF with a table of 4000 rows. Any suggestions on how to achieve this using mpdf1? Is there a method to speed up the process and avoid waiting for several minutes? ...

phphtmlpdf

I'm having an issue with my radio button list where it is allowing multiple selections at once. Can anyone explain

My web application features two radio button lists that allow users to select multiple items. These lists are dynamically generated using data from an API accessed via AJAX. Below, you can see images depicting the functionality: Here is a snippet of the ...

javascriptjqueryhtml

`Flex alignment of columns in Bootstrap 4`

I'm feeling really lost here. I had everything figured out, but after refreshing the jsfiddle, the solution suddenly changed on me. I have a row with two columns in it, but for some reason, I can't get them to align properly on the same row. I at ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Is -webkit-backface-visibility not working in Chrome today?

Today, I encountered a perplexing issue with my project. It was functioning perfectly yesterday, but today it seems to be malfunctioning. (Yes, I have checked previous versions on git.) The problem at hand is that some divs that were previously hidden usi ...

google-chromecsswebkittransform

Strange jQuery Bug

Previously, the code on my website was functioning correctly: $("#usr").load("somepage.php",{var1:var1,var2:var2}); However, after making changes to the navigation bar code, jQuery started behaving oddly. The first issue that arose was with this line: v ...

javascriptjqueryhtmlajax

PHP page showcasing a dynamic list of products

Hello, I am fairly new to this platform. I have a question regarding how to display product data dynamically from a database in one row with 4 different products side by side rather than in one column. <div class="row"> <div class="col-sm-12 co ...

phpcssbootstrap-4

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

javahtmlcssspringweb

The attachment uploader seems to be malfunctioning

Is there a way to enable file upload in Bootstrap that is compatible with both Chrome and Firefox? If anyone can provide a solution, that would be great. Otherwise, please share a link for a bootstrap file upload plugin. I have tried using the jQuery Fil ...

phphtmltwitter-bootstrap

Tips for rotating several images at once?

I'm working with the code snippet below: $(document).ready(function() { $(".content-image").each(function() { var angle = getRandomAngle(); $(".content-image").css("transform", "rotate(" + angle + "deg)"); }); }); function getRandomAng ...

jqueryhtmlcss

Heroku deployment of rails application is failing to recognize CSS

Having faced the same issue time and time again, I am reaching out for help. I have exhausted all possible solutions, but my heroku app at still lacks proper CSS styling. Here is a snippet from my gemfile: source 'https://rubygems.org' # Bundl ...

cssruby-on-railsheroku

Embracing the A attribute within HTML input elements

I am having an issue with my search bar setup using AJAX to display results. The input box covers the first result, making it unclickable (visible but not interactive). I have tried numerous solutions without success, as only the first result is affected w ...

javascriptphpjqueryhtmlajax