adjusting the spacing between lines for a specific li element

I am seeking to vertically align the phone number and email address with the little icons next to them. When I try to adjust the line-height, it affects all the li's in that section. I believe this is because they are inline elements. Here is the website and the corresponding CSS.

LINK: www.matthewtbrown.com/newsite

HTML:

<ul class="contact"> 
    <li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
    <li class="contacttext"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d4dbcbd6ced78e8df9cbd6dad2dccdd4d8d0d597dad6d4">[email protected]</a></li>
    <li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
    <li class="contacttext">978-761-1205</li>
</ul>

CSS:

.contact {
    color: #fff;
    text-align: center;
    float:none;
    }


.contact > li {
    display: inline;
    }

.contacttext {
    font-size: 19px;
    padding-left: 5px;
    }

Answer №1

Utilizing the vertical-align property is essential for aligning inline elements with each other:

To address your specific situation, the following code snippet should resolve the issue:

.contacttext{
   vertical-align:text-top;
}

It's important to keep in mind that for your li to properly contain the img, you'll need to adjust its display type from the default inline to inline-block.

Answer №2

Consider using a similar approach:

div {
   display: block;
   margin-top: 10px;
   padding: 5px;
}

Upon implementation, the outcome resembles:

Answer №3

give this a shot

<ul class="contact">
<li class="contacttext">
    <img src="http://s7.postimg.org/64ux9a1if/email.png"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19c93839e869fc6c5b1839e929a94859c90989ddf929e9c">[email protected]</a>
</li>
<li class="contacttext">
    <img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>

I decided to keep the icons and the text within the same li elements

Answer №4

I understand now. Here is the solution I implemented:

.contacttext {
    font-size: 19px;
    padding-left: 5px;
    display:inline-block; 
    vertical-align:middle;
  }

Answer №5

To fix the issue, you can apply the following CSS rule to your <img> element:

li img {
    margin-bottom: 3px;
  }
  

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

What are the steps for utilizing a button instead of an input field that is not within a form?

I need assistance with setting up a navbar with a button that will submit a form in the body with the ID of album_form. Can anyone provide suggestions for what to include in the onclick attribute to achieve this functionality? <body> <header& ...

A div element appears without any height if there is an image contained within it

I am facing a challenge with a div[div1] that contains other elements. The elements inside have an absolute positioned image, and both div1 and the elements have a float left property without showing any height. Is there a solution to give div1 a height so ...

Something is off with the CSS height property

I am facing an issue with setting the height of a div inside another div. To better illustrate my problem, here is the code snippet: .prodContent1 { position: absolute; background-color: #e1e1e1; border: 1px solid #ddd; width: 100%; box-sizi ...

Validation of HTML5 forms for AJAX button submission

I am working with a form that utilizes the new HTML5 form validation feature, which I find to be beneficial. However, I do not like how pressing the button causes the page to refresh (form submit). Instead, I would like to use AJAX to update specific page ...

What could be causing the calendar icon to not display in the table cell?

I've been working with the Bootstrap date picker inside a table, and I'm having trouble getting the date picker icon to display using the fas fa-calendar-alt css class. <td> <input type="text" id="expirydate{{$index}} ...

Conceal Class When Input Value is "X"

Is there a way to dynamically hide a specific seller (<div class="seller">) from a table using CSS and PHP based on a get parameter? Each seller has a unique ID represented by <input type="hidden" value="1" name="seller_id">. For example, if I ...

Ways to access the preceding DIV element closest to the current one

Hovering over the text My will cause the image myicon.png to fade out and back in: <div class="mmItemStyleChild"> <img src="theImages/myicon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacer ...

Update the text on the form submit button after it has been submitted

Is there a way to change the text on a submit button after it has been clicked? I have a form with a button and I want to switch the text from "click" to "Next" once the form has been submitted. <form> <div class="form-grou ...

How can Bootstrap 4 be utilized to achieve a responsive height on a single page application with no scrolling?

Embarking on the journey of responsive website design as a beginner in front end development, I am currently working on creating a basic angular chat application with bootstrap. Keeping responsiveness in mind throughout the design process is my goal, but I ...

Updating the email header for responding to New Order and shipped email notifications in Woocommerce

Looking for a solution to customize the reply-to email addresses specifically for New Order and Shipped emails sent to customers. I attempted to implement a suggested fix from this resource Change "reply to" email address in all Woocommerce email ...

Using JavaScript, what is the method for inputting values into a window.prompt()?

I've been working on a project that involves scraping basic HTML pages from an internal server at my workplace. When I visit these pages, a popup window similar to a windows.prompt() appears, asking for a username and password with the message "Enter ...

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

I prefer children to have their own unique style, instead of inheriting their parent's CSS

I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...

The drop-down links vanish into the depths of the webpage's body

Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

Can the browser doc mode be switched frequently?

My web application is built using AngularJS, but we also have a legacy web app that functions only in quirks mode and is included via an iframe on one of our pages. The challenge is to make this legacy app work within our main browser-based application, wh ...

Pair up balls that have matching numbers

A software application was designed with the following features: It can create 4 balls on the screen, each containing a numerical value Users have the ability to input values for new circles to be generated Upon clicking a button, 4 new circles with num ...

Can you share the specific equation used to calculate the size of a customized scroll bar thumb

I'm currently working on developing a custom scroll bar using HTML. Something along the lines of: <div class="demo"> <div class="content"> My content goes here </div> <div class="scrollbar"> <div c ...

What is the best way to ensure all table rows have consistent heights that are not affected by image sizes?

In the provided code snippet, you will notice that the height of the table rows varies slightly based on the height of the images. Currently, the image tags are set to height: auto;, and changing it to 300px would make all images the same size, however, m ...

Changing the visibility of a model in a method using the setVisible() method with Wicket Ajax

So in my code, I have: public class MyClass extends WebPage { static AjaxFallbackLink ddd = null; static AjaxFallbackLink dddd = null; (...) } Within the constructor, I have: ddd = new AjaxFallbackLink("previous") { @Override pub ...