The <p> element nested inside a <div> element with font-weight styling

I'm struggling to make a large font size and weight fit into a div tag while aligning it vertically at the bottom. Can anyone help me with this issue?

div
{
    border:1px solid black;
    height:100px;
  
}

table
{
    border:1px solid black;
    height:100px;
    width:100%;
}

p 
{
    font-size:50px;
    font-family:sans-serif;
    font-weight:900;  
    vertical-align:bottom;
}

td
{
    font-size:50px;
    font-family:sans-serif;
    font-weight:900;  
    vertical-align:bottom;
}
<div>
<p>TEST</p> 
</div>

<hr>

<table>
    <tbody>
        <tr>
            <td>TEST</td>
        </tr>
    </tbody>
</table>          

I've provided an example of what I can achieve with a table, but I want the same result using a div tag instead.

Link to demonstration

Answer №1

Uncertain about your exact requirements, but perhaps adjusting the margin-top could help position your text.

Link to Example 1

Another option: JSFiddle Example 2

You could also experiment with using relative/absolute positioning and setting top:0; as shown below:

div
{
    border:1px solid black;
    height:100px;
    position:relative;

}

p 
{
    font-size:50px;
    font-family:sans-serif;
    font-weight:900;  
    position:absolute;
    top:0;
}

Link to Example 3

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

Leveraging jQuery within a dynamically loaded div

I am attempting to implement some jQuery on a page that is loaded into a div using the .load() function. The PHP code loaded into the div contains a hidden section that slides out when a link is clicked. However, I am facing an issue where the div slides b ...

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...

Is it possible to substitute the input field in the filter component with a Material UI text field instead?

I am attempting to replace the input field for filter components with a text field from materialUI. Despite successfully displaying the input field by creating a new component, it is not filtering contents as desired. My goal is simply to replace the inpu ...

Is there a restriction on the number of stylesheets per page in Internet Explorer 8?

Discussing the limitations of CSS in a forum thread, a user shared insights: A user mentioned that Internet Explorer has is known to have a restriction of 4096 CSS rules per file. For more information, check out this source. Additionally, there might be ...

Using jQuery .each() within a PHP foreach loop: A guide

In my code, I have a foreach loop that iterates through an array of images, along with some JavaScript logic to add different classes based on whether the width is greater than or less than the height. The issue I'm facing is that the if function onl ...

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Currently, I am utilizing the `antd` Description components. In this scenario, when there is no `title` for the items, the value should be aligned to the left. You can see an example of this alignment in the image below: https://i.sstatic.net/Ah70f.png I ...

Adjusting the width of columns in a table

Previously in Bootstrap 3, I was able to use col-sm-xx on the th tags within the thead to resize table columns as needed. However, this functionality is no longer available in Bootstrap 4. How can I achieve a similar effect in Bootstrap 4? <thead> & ...

The network tab is failing to display the CSS styles being applied to the selectors

Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...

Filtering HTML with HtmlAgilityPack using custom queries

I am faced with a block of two HTML elements in this format: <div class="a-row"> <a class="a-size-small a-link-normal a-text-normal" href="/Chemical-Guys-CWS-107-Extreme-Synthetic/dp/B003U4P3U0/ref=sr_1_1_sns?s=automotive&amp;ie=UTF8& ...

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

Using Jquery, Javascript, or Ajax to deactivate the iframe by clicking on it

Whenever a link in an iframe is clicked, I need to close the iframe and div elements. I have seen websites that are able to achieve this functionality, but I can't remember the specific URLs. A while ago, I copied this code from a website to detect ...

PHP Simple HTML Dom fails to correctly parse specific links

As I dive into the world of HTML DOM Parsers and how they function, I've encountered a problem. I'm able to parse the root domain and other websites successfully, but for some reason, I can't seem to parse a specific link. Can anyone shed li ...

The arrows on the Slick Slider appear cropped on ios devices like the iphone 8, however, they display perfectly when tested on Chrome and Firefox

I am currently facing an issue with my slick slider setup at https://www.labtag.com/shop/product/clear-cryogenic-labels-for-frozen-vials-1-75-x-1-aha-224/. It is configured for 4 slides on desktop and 2 slides on mobile devices (768px breakpoint). The pr ...

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...

What's the best way to make sure an image and text are perfectly aligned on the

How can I align an image and text on the same line, as currently the a tag is higher than my text? Here is the HTML code: <div class="author-name"> <img class="article-author-img" src="{{ preload(asset('assets/st ...

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

I am getting a 404 error message stating that node_modules cannot be found

I am currently working on a web application using gulp and angular. However, when I run 'gulp serve', the application is unable to locate the files in the node_modules folder. Below is an excerpt from my gulp file: // This gulp file was generat ...

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...