Arranging HTML Lists in Perfect Order

I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve this effect, but it seems different when dealing with background images. Does anyone have any suggestions on how to tackle this?

If you need a visual explanation of what I'm trying to accomplish, here's a jsfiddle link: http://jsfiddle.net/M4XN4/1/

Thank you in advance!

<div id="container">
    <ul class="container">
        <li class="linkedin"><a href="#"></a><li>
        <li class="twitter"><a href="#"></a><li>
        <li class="facebook"><a href="#"></a><li>
    </ul>
</div>
htmlcsshtml-lists

Answer №1

Tidied things up a bit, does this match the look you had in mind?

You can keep most of your code for the a tags separate from the classes .facebook and .linkedin as well.

#footer-right ul li a{
display:inline-block;
height:200px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position:center;
line-height:200px;
}

link to updated code on JSFiddle

Answer №2

A vertical alignment can be achieved by applying display:inline along with specific margin settings.

margin-top:80px;

Answer №3

After adjusting the CSS properties, setting the ul to position: relative; and moving it down to top: 72px resolved the issue.

To determine the value of top, I calculated by subtracting 14px (ul's height) + 14px (empty space above ul) from 100px (vertical center of containing div).

You can view the updated code at this link: http://jsfiddle.net/M4XN4/2/

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

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

Building a Dynamic CSS Grid

Today is the first time I'm reaching out for help rather than figuring things out on my own. I'm currently working on a website layout that consists of visible tiles all with equal sizes, forming a grid structure. The challenge I face is making t ...

javascripthtmlcss

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

The animation of the background color over an image appears glitchy when viewed on Safari

I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have ...

htmlcsssafaricss-animations

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

csssafaricss-transforms

submit content to an iframe on a separate webpage

Work has been a challenge for me lately as I try to achieve a specific task. The starting page features a textbox and a button. My goal is to post the value entered in the textbox to an iframe on a different web page called iframeholder. The catch is tha ...

htmlpostiframe

Using only HTML, I have created a collapsible accordion in Angular without the need for JS code. However, when I click the button, nothing happens. Can you help me resolve

I am attempting to add an Accordion button to my website using the HTML code provided below. I am currently incorporating this in a very basic manner, without any utilization of javascript code, within this example of accordion snippet. When the button i ...

htmlangularaccordion

Personalized HTML Selection Arrow Graphic

I am seeking a solution to hide the default arrow of the HTML select list and instead add a custom image (arrow) to the list. https://i.sstatic.net/HF7vO.png .form-inline select { margin: 10px 35px 15px 0px; background-color: #fff ...

htmlcssstylesheet

Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'? I attempted the code below: var tble = document.createElement("table"); tble.id = "tble"; d ...

javascriptjquerycssexcelprinting

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Looking to adjust column widths based on the IDs received from the map function. Check out the code snippet: <TableRow> { tableData.header.map(header => { header.i ...

cssreactjsmaterial-uimaterial-table

Tips for replacing spaces with &nbsp; in a string using ReactJS and displaying it in HTML

<div className="mt-2 font-sidebar capitalize"> {item.title} </div> item.title can vary and be any string retrieved from the backend, such as "all products", "most liked", "featured items", etc. I am looking for a solution to subst ...

javascripthtmlreactjsstringnext.js

the child div within a Bootstrap 3 column is not being properly styled

Experiencing a strange issue with a relative div within a column in Bootstrap 3. Here's my code: <div class="col-lg-6"> <div class="large" style="background: url(img/bg.jpg);"> <h1 class="grid-header">Content 1</h1> ...

htmlcsstwitter-bootstrap-3

Different methods to incorporate Glyphicons without relying on Bootstrap CSS

For a recent client project, I utilized basic HTML and CSS. However, the client expressed a desire for Glyphicons to be included in the website menus. Attempting to incorporate Glyphicons with Bootstrap CSS posed challenges as it affected other aspects of ...

htmlcsstwitter-bootstraptwitter-bootstrap-3glyphicons

Navigate to specific location within a hidden overflow

<ul id="the-list" style="overflow:hidden;height:100px;> <li><a id="link1" href="#">Link 1</a></li> <li><a id="link2" href="#">Link 2</a></li> <li><a id="link3" href="#">Link 3< ...

jqueryhtml

Tips on halting the current animation and modifying styles upon hovering

Currently, I have a basic label featuring a contact number with a blinking animation. However, the animation is only a simple color transition at this time (see code below). I have managed to successfully pause the animation and revert the text back to it ...

csshovercss-animations

Is there a way to automatically resize the images on my navbar as the screen size decreases?

Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...

htmlcssnavbar

Ways to convert a PHP script to utilize PDO

Previously, a query was used to retrieve website settings stored in the database by an administrator, such as MyCompanyName or Copyright text. These settings were added in the site's backend by the admin. <?php error_reporting (E_ALL ^ E_NOTICE) ...

phpmysqlhtmlpdo

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

css

Utilizing a drop-down selection menu and a designated container to store chosen preferences

My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...

javascriptjqueryhtmlcss

Tips for updating the CSS properties of the "html" element

html { width:100%; } Looking to dynamically update the CSS of the html tag upon button click using JavaScript. The goal is to modify the existing HTML CSS code as shown below, but achieving this dynamically with a script. Is it possible? html { w ...

javascripthtmlcss