Place a paragraph element within the footer section

I'm having trouble aligning the <p> vertically in the footer. I've attempted to use vertical-align:middle; and margin-bottom:10px; for the p element, but it doesn't seem to be working as expected.

Code can be found here: http://jsfiddle.net/CL55P/

This is the HTML:

<footer>
        <p id="sidfot">Contact us at:
        <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fbfcf4fdd2e1fcfbf1f9e0f3e6bce1f7">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce5e2eae3ccffe2e5efe7feedf8a2ffe9">[email protected]</a></a> or 073 - 729 87 97</p>        
</footer>

And this is the CSS:

footer{
    clear:both;
    width:100%;
    height:40px;
    line-height:40px;
    position:fixed;
    bottom:0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow:    2px 3px 6px -0.5px #ccc;
    -webkit-box-shadow: 2px 3px 6px -0.5px #ccc;
    box-shadow:         0px -3px 6px -0.5px #ccc;
    background-color:#BFBDBF;}
    #sidfot{text-align:center;
    font-size:14px;
}

Appreciate any help!

csscss-position

Answer №1

Attempt applying the following styles to the p span:

display: table-cell;
vertical-align: middle;

Answer №2

To enhance the styling of #sidfot, include the following properties: margin: 0; and line-height: 40px;.

#sidfot {
    margin: 0;
    line-height:40px;
    text-align:center;
    font-size:14px;
}

View the updated jsfiddle here: http://jsfiddle.net/CL55P/2/

Answer №3

the line-height: 40px in the footer parent element is overriding the line-height of the paragraph, causing it to be pushed to the bottom of the element.

To fix this issue, try setting a specific line-height for the paragraphs within the footer:

footer p {
    line-height: 14px;
}

Answer №4

If you want to set the height of <footer> to 40px,

footer {
    clear:both; /* unnecessary since width is already 100% */
    width:100%; /* if positioning fixed, use left:Xpx; right:Xpx; instead */
    position:fixed;
    bottom:0; /* no need for measurement unit with zero value */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 2px 3px 6px -0.5px #ccc;
    -webkit-box-shadow: 2px 3px 6px -0.5px #ccc;
    box-shadow: 0 -3px 6px -0.5px #ccc;
    background-color:#BFBDBF;
}
#sidfot {
    text-align:center;
    font-size:14px;
    vertical-align:middle; /* centers text vertically within line-height */
    line-height:40px; /* sets footer height */
    margin:0; /* reset default margin for consistency */
}

You can then remove the line-height from <footer>

Check out the updated jsFiddle here

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

Creating a dynamic table with CSS: implementing two unique hover colors

Currently, I am working with a table that serves as a check list for a collection. My goal is to find a way to change the hover color of the table to GREEN if it's an item I own, and to red if it's an item I don't own. Since I am a beginne ...

csscolorshighlight

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

In Javascript, create a variable that dynamically updates for every child element

While this might appear to be a simple question, it has been troubling me for some time now. Let me elaborate on what I am trying to accomplish. I have a collection of images in a gallery, and my goal is to center each image vertically within its contain ...

javascriptjqueryhtmlcss

Creating an automatic image carousel using a combination of Jquery, Javascript, and CSS

I have been working on creating a slider using jQuery and javascript, but I am facing some issues with the autoplay functionality and the next-previous buttons. This slider is intended for displaying images as a title indicates. Can anyone assist me with i ...

javascriptjqueryhtmlcss

Ways to combine text styling with images, stroke effects, and shadows all at once

I am looking to enhance my text with a background image, a text-stroke, and a text-shadow. The issue I am facing is that the text-shadow appears on top of the background image. Does anyone have a solution for placing the shadow behind the image? If you te ...

csstextbackground-imagetext-shadow

Troubleshooting WordPress 4.4 Image Issues: Understanding the Conflict between Srcset and Bxslider

We have several company websites that use Wordpress along with a Genesis installation, a custom Genesis child theme, and bxslider for image sliders. When we view the slider on Firefox, we notice a responsiveness issue that we believe is caused by the new ...

jquerycsswordpressbxslidergenesis

Achieving the perfect horizontal alignment of images

Currently working on a new project and here's the page I'm focusing on: The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this ...

htmlcss

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

Incomplete width allocation for the floating div positioned to the left

I've encountered an issue with the placement of the side-text div in relation to the image. Currently, without specifying the width of the side-text div, it automatically moves to the bottom. To address this problem, I attempted using display:inline- ...

htmlcss

Paths to External Stylesheets

Imagine having a stylesheet body { background-image: url('/images/background.jpg'); } situated in the header section of a nearby document <html> <head> <link rel="StyleSheet" href="http://externalserver/stylesheet.cs ...

htmlcss

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

The Angular Table row mysteriously vanishes once it has been edited

Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete. A challenge arises when editing and saving a row causes it to disappear. Attempts were made ...

javascriptjqueryhtmlcssangularjs

Managing cookie-related changes to CSS classes using jQuery can present challenges

I stumbled upon an interesting solution for changing background color and storing it in a cookie by utilizing jquery.cookie. After making a few tweaks, it worked smoothly: $(document).ready(function () { $("body").css("background-image",$.cookie("<?ph ...

javascriptjqueryhtmlcsscookies

Determining the precise location of the div element

I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...

javascriptjqueryhtmlcsscss-position

HTML and CSS link conflict

As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...

htmlcss

Is there a way to center text that is aligned to the left within a div?

Is there a way to center text that is left aligned? I'm struggling to achieve the following effect: This text is left aligned. This text is left al ...

htmlcsstext-alignment

How can I change the background color of my notification box to red if the count is not equal to zero?

When the count equals 0, I don't want any effect on the notification box. However, when the count is not equal to zero, I want the notification box to turn red. I tried implementing this, but it's not working as expected. By not working, I mean n ...

javascriptjquerycssajax

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

htmlcss

Utilize CSS to style Hover effects

Can someone please assist me with this issue? I am having trouble getting the CSS to work for my hover effect. I suspect that there might be a problem with my syntax. Here is the HTML code: <div id="horizontalmenu"> <ul> <li><a h ...

htmlcss