A guide to aligning text on the right side of an image with HTML and CSS

Looking for assistance to align text on the right side of an image at the same level. Below is the code I have:

<a class="following-row" href="index-2.html?pid=2306">
                    <img alt="Girls logo" src="photos/users/35257/resized/9fd79de3589edff68db18bb6141025c3.jpg">
                    <span class="following-row-text">Girls<span class="item-details"> · 78 followers</span></span>
                </a>

I am struggling to find the right CSS styling for the desired layout. Any help is appreciated.

Thank you

htmlcss

Answer №1

<div>
  <img style="vertical-align:middle" src="http://cdn.jssor.com/demos/img/icons/icon_chrome.png">
  <span style="">Girls · 78 followers</span>
</div>

Take a look at this code snippet

Answer №2

Revised the solution based on feedback.

a.wrapper img {
  cursor: pointer;
  width: 100px;
  height: 100px;
  vertical-align: middle;
  text-decoration: none;
}
a.wrapper span {
  padding-left: 10px;
  cursor: pointer;
}
a.wrapper:hover img {
  margin: -1px;
  border: 1px solid red;
}
a.wrapper:hover span {
  color: red;
}
<a hre="#" class="wrapper">
  <img src="http://pipsum.com/100x100.jpg" alt="Image">
  <span>Girls · 78 followers</span>
</a>

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

Define the term "Parse Error" as it pertains to CSS

i'm encountering an issue while attempting to validate my CSS. Despite trying to validate using direct input (copy and paste), the error persists. In my pursuit to find a solution, I researched on Google only to discover that it could be related to sp ...

htmlcss

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

htmlangulartypescriptcomponents

The date selection tool is failing to appear on the screen

I successfully created a date picker using Bootstrap. Here is the code: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <s ...

jqueryhtmlbootstrap-4

"Is there a way to target an element within another element that has inline styles using

What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...

htmlcsscss-selectorsinline-styles

What is the best way to show information entered into a textbox on a different webpage?

Looking for advice on how to collect data in a text box and display it on another page? I have included HTML code for both the announcement page (where the data is entered) and the archive page (where the data should be shown). Could someone guide me on ...

javascripthtmlcssformsfrontend

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

I am currently exploring how to implement this layout using Flexbox. So far, I have only managed to come up with the following code snippet: https://i.sstatic.net/mKVlu.jpg Is there a way to achieve this purely through CSS without altering the HTML struc ...

htmlcssflexboxcss-grid

Transform the text with a stylish touch within a 'textarea' element

I am currently working on a form with the following design: At the moment, I am at this particular stage and focusing on some minor details: One issue I have encountered is that the "Your text..." appears stuck to the top left corner of the textarea. I a ...

htmlcsstextareamargin

What strategies can I employ to prevent my div tags from shifting positions relative to each other?

I spent time formatting a div tag for my main content and then placed that div inside another wrapper div. However, when I tried to add my logo to the site, everything shifted. It appeared as though the div containing the logo had pushed the wrapper down. ...

htmlcss

Scala Play templating with vararg HtmlContent allows for dynamic generation of

I have a standard template in play 2.6, where I need to pass in a variable number of HtmlContents. The template is defined like this (including the implicit parameter): @(foo: String)(content: Html*)(implicit bar: Bar) When working with the template, I c ...

htmlscalaplayframeworkvariadic-functionstwirl

What are some ways to utilize a Bootstrap modal button embedded within a clickable row?

Having a strange issue in my project. I am trying to incorporate a modal button inside a link-able row. However, when I click the button to trigger the modal id, it pops up and then redirects to the myexample.com page, which is expected behavior. While I ...

htmlbootstrap-4

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Is there a way to convert inline styling to CSS using Material-ui within a React component?

In my development work with React, I initially utilized inline styling to customize the appearance of material-UI components. However, I have come to realize that utilizing CSS provides a more structured and efficient approach to styling components. Despit ...

cssreactjsmaterial-ui

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

Steps to prevent cart resizing in desktop view:

For a front-end challenge, I need you to design a simple card that displays consistently in both mobile and desktop views. I took a mobile-first approach because I've encountered issues where the card layout changes when viewed on desktop. Check out ...

htmlcssfrontend

Having trouble with my phonegap app not allowing me to open any

I've just embarked on creating my first phonegap application using an HTML5 mobile website template. After deploying it, I noticed that the external links are not working within the app. Clicking on a link doesn't seem to do anything. To addres ...

androidhtmlcordovaphonegap-plugins

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, conside ...

css

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

In my jsp file, there is a div structured like this : <div id="response" class="response"></div> After triggering an ajax call to a servlet, the content of this div gets updated with the following elements : <div id="response" class="res ...

javascriptjqueryhtmlajaxjsp

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

phphtmlajax

Dynamic banner image

I currently have a jumbotron image in the background, but it isn't as responsive and I'm struggling to get the whole image to display properly. Here is what it looks like currently: https://i.sstatic.net/IpuDi.png Here is the full image for ref ...

htmlcsstwitter-bootstrapbootstrap-4