CSS is malfunctioning on IE and Chrome browsers, yet it functions correctly on CodePen when using Chrome

We are experiencing issues with our CSS and HTML not displaying correctly in IE or Chrome. The text is not properly center aligned.

Oddly enough, it works fine when viewed through Chrome on CodePen. The text is center aligned there.

<html>

<head>
<style>
div {
  float:left;margin-left:10px;word-wrap:break-word;overflow:hidden;
 width:150px; 
 height:150px;
 line-height: 150px;
 background:red;   
 color: #fff;
}

div p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
}
</style>

</head>

<body>

<div>
<p>
hello is the the testhello is the the testhello is the the testhello
  </p>
</div>

</body>

</html>

When I view this on my local machine using Chrome:

Answer №1

If you wish to utilize the Vertical-align property for an element, it is necessary that its display is set to table-cell.

Please verify this. It is working perfectly.

div {
  float: left;
  margin-left: 10px;
  word-wrap: break-word;
  overflow: hidden;
  width: 150px; 
  height: 150px;
  line-height: 150px;
  background: red;   
  color: #fff;
  display: table;
}

div p {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
  height: 100%;
}

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

PHP - Working with Regular Expressions in Improperly Formatted

Struggling with Regex has always been a challenge for me, especially when I need to extract content from a malformed piece of code like the option tag. The website where this code is obtained from has poor programming and inconsistent label structures: I& ...

How can I retrieve a list of downloads utilizing the Chrome.downloads api?

I have developed an extension that needs to display all the downloads from the user's downloads folder on a webpage instead of opening the download folder directly. Below is the code I have implemented: window.onload = function(){ var maxNumOfEn ...

increased space between tables in HTML email design for optimal display in Gmail inbox

Here is the link to my code: http://jsfiddle.net/user1212/G86KE/4/ I am experiencing an issue in Gmail where there is extra white space between 2 tables inside the same cell. I have attempted using display:block; margin:0; padding:0; line-height:0; How ...

Can you explain the purpose of using href="#" in web development?

I've noticed that numerous websites use links that have href="#". Can you explain what this means and how it is typically used? ...

Using curl to retrieve information from a webpage

Before we proceed, let's take a look here, www.zedge.net/txts/4519/ This particular page contains numerous text messages. I want to create a script that can open each message and download it, however, I'm encountering some difficulties. Here i ...

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

Reduce the value in the database when a button is clicked using PHP

I am currently working on a carpooling website and I could really use some assistance. I have implemented a button that, once clicked, should decrease the number of available free spaces in the car by one (meaning the person who clicks it will reserve a ...

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

Full-screen Bootstrap burger navigation menu

Check out this code snippet on boot ply: I'm trying to create a full-screen menu with the same effect as the burger menu for non-mobile screens. Currently, the burger menu only shows up on mobile devices. Does anyone know how I can achieve this? Than ...

Words existing outside of an element

Currently, I am developing a slider using Bootstrap, and I have encountered an issue where the text displays on the left instead of aligning to the center in relation to the elements. To see this issue in action, you can check out the live demo here: In ...

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

Enhancing Plotly Graphs with Custom Node Values

Encountering an issue while attempting to assign values to nodes on a plotly graph. Code: <html> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <style> .graph-container { ...

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

Place a list with scrolling and overflow features side by side

Having trouble getting my headers to scroll with overflow auto and white-space nowrap. Can't figure out why it's not working. I want to create hyperlinks within headers to link to specific parts of the website. I have the code for hyperlinking s ...

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

What is the best way to ensure my checkboxes are positioned on individual lines?

I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...

Looking for the answer to utilize selenium for product scraping

I'm currently focused on a personal project involving parsing product names and prices. To achieve this, you can navigate to shoppingSite. After arriving at the site, click the button below the map, then click it again on the right side. Opt for the u ...

Clicking on an anchor tag will open a div and change the background color

.nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { ...