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

Fade between two elements using jQuery

Can someone assist me with adding a fade effect between elements in my code? Any advice or suggestions would be greatly appreciated! $("#example p:first").css("display", "block"); jQuery.fn.timer = function() { if(!$(this).children("p:last-child").i ...

jqueryhtmlfadeinfadeout

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

javascripthtmlangularjs

Is it possible to update the event parameters with every click?

Is there a way to dynamically add a Select box for selecting a condition each time the "add" button is clicked? For example, when the add button is clicked, I would like the following elements to be continuously added: https://i.stack.imgur.com/6bad2.png ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsevent-handling

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

htmlcss

Creating an inverted curve or border-radius for a div element is a design technique that can add

I've been tackling a project that requires me to style the border of a div in an inverted manner. To achieve this, I'm limited to using only CSS and JS without any plugins. I've searched through various online resources and similar questions ...

javascriptjqueryhtmlcss

A helpful tip for those working with jQuery or WordPress PHP: Use a script that calculates the number of characters in a text, identifies the last space, and replaces everything after

Is there a way to restrict the amount of text shown within a div sourced from a WordPress Custom Field? <?php $textcount = strlen(get_field('custom_quote')); ?> <?php if ( $textcount > 250 ) : ?> <?php the_field('custom ...

phpjquerycsswordpresscharactercount

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

csshover

The material UI tabs text is missing the ellipses due to a coding error

As a newcomer to web development, I am experimenting with adding an ellipsis to the span element within the tabs. <div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;"> <div class="MuiTabs-flexContainer"> ...

cssreactjsmaterial-ui

The impact of angles on drop shadows in CSS3

Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...

css

The background of an HTML button does not appear in IE8

My buttons are not showing up in IE8. I tried adding background: transparent url('..'), but it didn't help. Here is the code: .wpcf7 input.wpcf7-submit { background: url("/wp-content/themes/ASC/images/<?=ICL_LANGUAGE_CODE;?>_submi ...

htmlcss

There seems to be an issue with the functionality of Angular Material in Angular9

I've encountered an issue with the material form field, even after importing the necessary modules. Surprisingly, there are no console errors to provide more insight into the problem. { "name": "online-shop", "version": "0.0.0", "scripts": ...

htmlangularangular-materialhtml5-canvasangular9

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

htmlcsstextarea

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving. Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem: In ...

javascriptjqueryhtmlcsstooltip

Tips on customizing default Polymer CSS

Currently, the core-toolbar features an indent class that shifts the title to the right by 60px. However, material design guidelines suggest that the margin should actually be 80px (oddly enough, the number 60 is not mentioned in the documentation). I cou ...

csspolymerweb-componentshadow-dom

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Adjust the color of the chosen <li> item to a different shade

I want to change the text color of the "Sale" item, but not a phone number using only CSS. Unfortunately, I am unable to modify the HTML code. https://i.stack.imgur.com/PPnna.png .menu.left a:first-child { background: yellow; color: red; } https ...

css

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

cssangularmapboxmapbox-gl-js

Restrict page scrolling to the vertical position of a specified div [Using jQuery, javascript, and HTML]

Currently, I am in the process of developing a personal website that features numerous expandable items. My goal is to restrict the page scrolling to the height of the expanded item once it is opened. I do not want users to be able to scroll above or below ...

javascriptjqueryhtmlcssscroll

Elm div contenteditable loses cursor position after content update

Is there a way to maintain the cursor position while typing in a contenteditable div? I'm utilizing Elm to generate a text box and require the text within it to undergo processing with every input. The rationale behind opting for a contenteditable di ...

htmlcontenteditableelm