Align the text to the top vertically

Take a look at the DEMO I've been experimenting with.

I'm aiming to align the text perfectly at the top of the div to match the image alignment.

I want both the image and text to be aligned as if they were on the same line, currently there appears to be some space above the text that is not in perfect alignment with the top.

HTML

<div class="wrap"> 
    <div class="image"><img src="" /></div>
    <div class="content">Lorem ipsum</div>
</div>

CSS

.wrap{background:grey}
.image{display:table-cell; vertical-align:top}
.content{display:table-cell; vertical-align:top; font-size:24px}

http://jsfiddle.net/s38Uv/20/

Answer №1

To align content to the top, you don't even require the use of display:table-cell as it is the default behavior.

The reason for the gap might be due to variations in line-height compared to the virtual box enclosing the text, which can differ based on the font used. For compatibility with Internet Explorer 7 and newer versions, try using display:inline-block followed by adjusting the top margin slightly with margin-top: -0.Xem, where X can be any number. Alternatively, pixel values can also be used for setting the top margin.

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

Fill an HTML table with comma-separated values (CSV) information

After conducting some research on the internet, I attempted to modify a jQuery script in order to populate an HTML table with data from a CSV file. However, I encountered an issue as the table remained empty. Below, you can find the code that I used. Any a ...

css - the art of centering span text within a rounded button

CodeSandbox: https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js https://i.sstatic.net/HDtft.png I'm trying to center the dash text within a button, but I'm struggling to find a solution. html <button class="round-butto ...

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...

Retrieve all HTML components with LXML

I have a large div element in my HTML document that I need to parse in order to retrieve all of its HTML content as well as any nested tags. Here is the code I am currently using: innerTree = fromstring(str(response.text)) print("The tags within the speci ...

Obtain the precise value indicated in CSS by utilizing jQuery

Explanation It's surprising that this question has never been asked before, but here we are... Please don't confuse it with this other question. I'm attempting to save the height of an element using jQuery's data method so I can retr ...

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

Only one file being uploaded

I found this code on another programming forum, but I'm having trouble getting it to function properly. Despite my best efforts, the files are not being passed during testing. The error message displays: total: 0 It fails at that point. Any assist ...

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

Sending Ajax GET request following the first Ajax POST request

Upon completing the initial ajax post, I am attempting to make a second ajax call. The initial call is a POST and the second call is a GET. Even though I am able to retrieve the values from the url file.php in the second call, I am facing difficulties in u ...

"Adjusting the size of a circle to zero in a D3 SVG using Angular 2

Trying to create a basic line graph using d3 in Angular 2 typescript. Below is the code snippet: import { Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core'; import * as d3 from 'd3'; @Component({ selector: 'm ...

What are some ways I can troubleshoot my contact form?

As someone new to web design, I recently completed my very first site using a combination of HTML, CSS, and a touch of JavaScript. I managed to create a small contact form within the site, but now I'm wondering if there's a way to make it functio ...

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

After trying numerous strategies, I am still struggling to place two buttons next to each other evenly: <input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' /> <input type="button ...

Trouble with displaying inline images using <div> tag

I am trying to display 9 images in a WordPress footer side by side horizontally. Here is the HTML code I used: <div id="sponsers"> <ul> <li><img src="http://mysite.com/image1.png" width=257 height=67></li> <li><img s ...

Image not displayed when JavaScript adds <IMG SRC=

While I am dynamically adding rows to a table, each new table item's innerHTML is set as follows: picCell.innerHTML = '<label for="checkbox-a" data-form="ui-btn-up-a" class="'+uncheckedClassString+'" ...

Increment the counter value by one when a new class is created or appended

My goal is to develop a system that increments the 'fault' counter by one every time a wrong answer is submitted. To achieve this, I have configured my system to detect when a class named "incorrectResponse" is generated. However, I am encounteri ...

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

Searching controls within a repeater using JavaScript to extract dropdown list values - how can it be done?

I am currently facing an issue with extracting the selected values from dropdown lists within a repeater. I need to check what values the user has selected in the dropdowns before triggering a postback on my form. Here is how my repeater is structured: & ...

Adjust the autofocus to activate once the select option has been chosen

Is there a way to automatically move the cursor after selecting an option from a form select? <select name="id" class="form-control"> <option>1</option> <option>2</option> <option>3</option&g ...

Move to the first item on the list without any unnecessary scrolling of the view - ReactJS

Whenever I try to scroll to a specific item in the list, clicking on it causes the entire view to scroll instead. Is there a way to ensure that only the div containing the list scrolls? <AlertsList> {productInventoryAlert?.map((prod ...