Text not aligned with Line Height

I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach.

Below is the code I have so far:

HTML:

<div class="top">
    <img src="/wp-content/themes/shipping/images/TV.png" />
    <span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>

CSS:

.top {
    height: 150px;
    padding: 10px 0;
}

.top img {
    max-height: 100px;
    padding: 0 10px;
}

.cantstop {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 150px;
    font-size: 45px;
    margin: auto 0;
    text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
    }

.shipping {
    font-family: 'Grand Hotel', cursive;
    font-weight: normal;
    font-size: 75px;
    line-height: 150px;
    margin: auto 0;
    text-shadow: 4px 4px 0px rgba(217,144,178,1);
    }

To view the issue in action, please visit cantstopshipping.com

Thank you for taking the time to assist.

csshtml

Answer №1

Include the following CSS:

.header img {
    float:right;
}

.header span {
    float:right;
}

Also, update the CSS for:

.dontstop,
.receiving {
    line-height:150px;
}

The height of the header container is actually 130px not 150px due to padding adjustments.

I hope this explanation clarifies things, feel free to ask if it's still unclear.

Answer №2

To center it vertically,

TRY IT OUT

Simply add the CSS property vertical-align:middle

.content span {
  vertical-align:middle
}

To center it horizontally,

SEE DEMO*

Apply the style .content { text-align:center }

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

Scrolling through menus horizontally

I am faced with a challenge where I have Menu items from Menu1 to Menu10, but the limited space on the web page prevents me from displaying all the menu items at once. Currently, I can only show 4 menu items - Menu4 to Menu7. To access the remaining menu i ...

csshtmlmenubar

Is there a way to eliminate a div and all its contents from the DOM?

As I work on my web application, I am trying to implement a system where error messages can be returned via ajax upon success or failure. The ajax script is functioning correctly in terms of returning errors or successes. However, my challenge lies in com ...

javascriptjqueryhtmlcssajax

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

javascripthtmlcssdrop-down-menu

Is there a way to display a div element just once in AngularJS?

I only want to print the div once and prevent it from printing again. $scope.printDiv = function(divName) { var printContents = document.getElementById(divName).innerHTML; var popupWin = window.open('', '_blank', 'width=300, ...

javascripthtmlangularjs

How to use puppeteer to extract images from HTML that have alt attributes

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1">&l ...

javascripthtmlnode.jspuppeteer

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

Tips for adjusting the alignment of the Vuetify component "VDatePicker" based on the position of its parent component on the screen

Currently, I am utilizing the VMenu component from Vuetify which contains another Vuetify component called VDatePicker. The issue arises when clicking on a text field triggers the appearance of the calendar (VDatePicker). Normally, the VDatePicker componen ...

javascriptcssvue.jsvuetify.js

Accessing a variable from another HTML using JavaScript

I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...

javascripthtml

Comparing the name and URL of a link using Selenium webdriver in C#

I am currently looking for ways to automate the testing of links on a Sharepoint site, ensuring they are connected to the correct URL. However, I have hit a roadblock when it comes to performing the comparison. After locating the links and adding them to ...

c#htmlvisual-studioselenium-webdriverautomated-tests

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

htmlcss

Discover the ultimate guide to implement a captivating visual overlay using CSS

I've crafted some links using CSS to incorporate a background image (to give it the appearance of a button) employing the subsequent code: <a class="btnImg" id="btnImgConfig" href="#"></a> .btnImg { width:100px; height:100px; ...

css

Error in Bootstrap V5 Sass: Mixin not defined - when transitioning from @import to @use module system

Transitioning to the new SASS module system with @use from @import has presented some challenges, especially when working with bootstrap v5: https://i.sstatic.net/8Hy7W.png Old way: @import "~bootstrap/scss/bootstrap"; @import "~bootstrap/ ...

csssassscss-mixinsbootstrap-5

Resolving issues with CSS placement and resizing

I have been considering developing a UI toolkit that offers an intuitive and powerful way of setting the position and size of elements/widgets. Here are some examples of how it could be used (although they are not currently implemented): ui("Panel").size( ...

javascriptcssuser-interface

Ways to customize the size of a radio button with CSS

Is it possible to adjust the size of a radio button using CSS? ...

htmlcssradio-button

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

Is there a way to efficiently create an ng-repeat for multiple divs?

I am looking to iterate through a collection of divs, as mentioned below. Each object in the list will have content-data and a link to an image. The code provided shows individual entries for each list item, but I would like to retrieve it from the angular ...

javascriptcssangularjsangularjs-ng-repeat

What is the best way to access the tooltip text in Reddit?

Currently, I am in the process of developing a Selenium web scraping tool specifically for Reddit. However, I am encountering some challenges in extracting the timestamp displayed in the image. from selenium import webdriver from webdriver_manager.chrome i ...

pythonhtmlseleniumwebweb-scraping

The font implemented in Bootstrap does not appear to be adapting well to different

As I embark on the Bootstrap journey, I find that everything looks great on my desktop browser in terms of responsiveness. However, when I switch to my iPhone 6, it doesn't seem to display as expected... Provided below are a few screenshots: Desktop ...

csstwitter-bootstrapfontsresponsiveness

Tips for Creating a Fixed-Width Element

I am struggling with creating text wrapping around a box inside a full width page template on Wordpress. The plugin developer suggested wrapping the text inside a fixed width element, but I am unsure how to do this. Any assistance would be greatly apprecia ...

phpcsswordpressthemes

Create an element that can be dragged without the need to specify its position as absolute

I am having an issue where elements I want to drag on a canvas are not appearing next to each other as expected. Instead, they are overlapping: To make these elements draggable, I am utilizing the dragElement(element) function from https://www.w3schools.c ...

javascripthtmlcsspositiondraggable