Achieving Vertical Alignment of Text with CSS

Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned?

<html>

    <head>
        <style>
            body {
                margin-left: 20%;
                margin-right: 20%;
            }
            footer {
                text-align: center;
                border: 1px dotted black;
            }
            #foo {
                float: left;
                vertical-align: middle;
            }
            #bar {
                float: right;
            }
        </style>
    </head>

    <body>
        <footer> <span id="foo">this is some text</span>
 <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>

        </footer>
    </body>

</html>
csshtmllayoutcss-float

Answer №1

One possible solution for the issue you're facing is to address floats and the absence of block or inline elements. Consider looking into the clearfix technique which could potentially resolve this challenge.

If you prefer a quick fix without delving into in-depth reading, simply include the following CSS snippet:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Don't forget to apply the clearfix class to your footer element.

Answer №2

<body>
<footer>
    <span id="foo">this is a piece of sample text</span>
    <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>
    <br clear />  <!-- consider adding clear here or via css-->
</footer>
</body>

View the code at http://jsfiddle.net/yGPKF/1/

Answer №3

give this a shot

in the following demonstration, footer has been assigned a specific height, while #foo has been given a matching line-height.

 body {
   margin-left: 20%;
   margin-right: 20%;
 }
 footer {
   text-align: center;
   border: 1px dotted black;
   height: 100px;
 }
 #foo {
   vertical-align: middle;
   line-height: 100px;
 }
 #bar {
   vertical-align: middle;
   display: inline-block;
 }
<footer> <span id="foo">this is some text</span>
  <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span>

</footer>

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

The checkbox remains unchecked after clicking on the button

I am attempting to add checkboxes before the list items in a listview on my page. When I click on the "edit" button, the listview successfully adds the checkboxes before the list items. However, when I try to click on the checkboxes, the page automatical ...

jqueryhtmllistviewjquery-mobilecheckbox

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div. <div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text ...

htmlcss

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

javascriptjqueryhtmlcss

Is the bootstrap navigation bar always hogging up valuable space?

Currently, I am diving into the world of react while also incorporating bootstrap styles. My current project involves creating a navigation bar using bootstrap, however, I'm facing an issue where the navbar is displaying in the middle rather than wher ...

htmlcssreactjsreact-bootstrapbootstrap-5

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

Turn off the ability for items in Isotope to be set to an absolute

Currently, I am customizing my portfolio and looking to implement my own method for positioning the portfolio items. The Isotope library typically uses absolute positioning with left and top properties to position portfolio elements. Even after trying to o ...

htmlcssjquery-isotope

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

htmlcssangulartypescriptangular-material

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

javascripthtmlcssscroll

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

htmlnode.jsdatabaseamazon-web-servicesnpm

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

htmlcsswindowswindows-media-player

Interactive JavaScript Slider for Customizing Selection

Recently, I came across a range slider and I am trying to make it more dynamic. The current JavaScript code has hardcoded references to specific HTML elements, and I want to have multiple sliders on my HTML page, each functioning independently. The code sn ...

javascripthtmljquerycssrangeslider

The reason why setting height to 0 is ineffective in a CSS definition

Within my current project, I am utilizing vue.js 2 and have implemented an img component. Below is the code for this component: <template> <div class="banner"> <img class="banner-img" :src="bannerImg"/> </div> </template> ...

javascriptcssvue.jsvuejs2

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

htmlangular

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

javascripthtmlangularjs

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(gotMedia).catch(function(e) { console.log('getDisplayMedia() error: ', e); }); Triggering the above code will result in a popup like this. There is anoth ...

javascripthtmlreactjs

Spin the connections around a circular path

I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...

javascriptjqueryhtmlcssrotation

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

javascriptcssvideohtml5-videovideo.js

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables