Aligning hyperlinks with background images

Trying to align the link with the background image centered but it keeps ending up at the top, even though I specified the sizes and each background image has different dimensions.

https://i.sstatic.net/HMdMx.png

HTML 

  <section>
    <h3>Contact</h3>
    <ul id="contact">
      <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li>
      <li class="mail"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2beb6b39fb2beb6b3f1bcb0b2">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573a363e3b173a363e3b7934383a">[email protected]</a></a></li>
    </ul>
  </section>

CSS 

#contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

#contact a {
  display: block;
  min-height: 30px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  margin: 0 0 0 15px;
  padding: 0 30px 0 30px;
}

.phone a {
  background-image: url("../img/phone.jpg");
}

.mail a {
  background-image:url("../img/mail.jpg");
}
css

Answer №1

If you want to achieve this effect, you can use the code snippet provided below. Alternatively, you could also utilize the :after pseudo-element.

.phone:after {
  background-image: url('http://imgur.com/dU2eTo1.png');
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

Snippet of Code:

#contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

#contact a {
  display: block;
  min-height: 30px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  margin: 0 0 0 15px;
  padding: 0 30px 0 40px; /* Modified Value */
  line-height: 30px; /* Additional Style */
  background-position: left center; /* Added Style */
}

.phone a {
  background-image: url("http://imgur.com/dU2eTo1.png");
}

.mail a {
  background-image:url("http://imgur.com/dU2eTo1.png");
}
<section>
    <h3>Contact</h3>
    <ul id="contact">
      <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li>
      <li class="mail"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fef2faffd3fef2faffbdf0fcfe">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375a565e5b775a565e5b1954585a">[email protected]</a></a></li>
    </ul>
  </section>

Answer №2

#contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

#contact a {
  display:block;
  min-height: 30px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position : 0% 1%;
  margin: 0 0 0 0;
  padding-top:1%;
  padding-left:30px;  
}

.phone a {
  background-image: url("http://cps.iith.ac.in/cpsiit/sites/all/sites/default/files/images/landline.png");
}

.mail a {
  background-image:url("http://icons.iconseeker.com/png/fullsize/sticker-pack-1/mail-54.png");
}  
<section>
    <h3>Contact</h3>
    <ul id="contact">
      <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li>
      <li class="mail"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0ada1a9ac80ada1a9aceea3afad">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2beb6b39fb2beb6b3f1bcb0b2">[email protected]</a></a></li>
    </ul>
  </section>

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

Mobile responsiveness malfunctioning

I recently launched my first responsive design website, which you can view here After testing the responsiveness on Chrome and FF by resizing the window, everything seemed to be working fine. However, when I checked it on my phone, the layout appeared ide ...

cssresponsive-design

Reactjs encountering issues loading css file

Currently, I am working on a project in Reactjs with Nextjs. To add CSS to my project, I have stored my CSS files in the 'styles' folder. In order to include them, I created a file called '_document.js' and implemented the following cod ...

javascriptcssreactjsnext.js

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using a ...

htmlcssbootstrap-4

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

jqueryhtmlcssjsonvue.js

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

cssangulartypescriptionic-frameworkicons

Trigger a click event to alter the child div elements

I have a <div> that expands when clicked and shrinks back when clicked again. Inside this div are images that should only appear once the div expands. My issue is ensuring that all images except the first one are hidden until the div expands. https: ...

javascripthtmlcss

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox

How can you utilize CSS to automatically generate section numbers, specifically for multiple sections?

Is it possible to automatically generate section numbering in CSS only when there are multiple sections present? I discovered that using CSS, one can create automatic numbering for sections. body { counter-reset: section } h2 { counter-reset: sub-section ...

htmlcssautomatic-properties

Avoid duplicate borders on columns that adjust their size based on the screen width

Picture yourself utilizing Bootstrap 4 and displaying various cells, each with unpredictable numbers. .cell { border: 1px solid black; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> < ...

csstwitter-bootstrapbootstrap-4border

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

htmlcss

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

htmlcssreactjs

Adjusting text to begin after a variable by two spaces (equivalent to 5 pixels)

When displaying the echoed text below, I noticed that "DURING" sometimes overlaps with the variable $submittor when there are not enough &nbsp;s. On the other hand, if too many &nbsp;s are added, there ends up being excessive space between $submitt ...

css

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Wrapping header text in Vuetify's v-data-table

Struggling with wrapping the header text on a v-data-table component. I've tried applying styles, but only tbody elements are affected. The header (thead element) remains unchanged. Any suggestions on how to get custom styling for the header? For ins ...

cssvue.jsvuetify.js

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

javascriptjqueryhtmlcss

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Determining the true width of a span element using jQuery

I am trying to determine the actual width of a span element within a div, but when I attempt to do so, it gives me the width of the entire div instead. Here is the code I am working with: <div class="content"> <span class="type-text" id="ta ...

jqueryhtmlcss

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

javascriptjqueryhtmlcss