To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text.
It's important to keep the height at 30px, even with two lines of content, so that the design remains consistent.
You can view a demo of this alignment issue here: http://jsfiddle.net/ydFy5/1/
Give this a try!
p.event_desc{
background: rgba(0,0,0,0.76);
padding:10px 5px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 16px;
margin: 0 4px 0 0;
width:93%;
}
Discover a new way to specify line-height:30px
Just like this:
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
Watch the demo live http://jsfiddle.net/ydFy5/10/
In my opinion, specifying the line height should solve the issue in your demonstration.
I was able to achieve success with your sample by including the line-height property in your code.
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
To add some extra space to your p tag, simply insert an empty img element like this:
<img style="height:38px;" align="middle"/>
(The height of the image will be added to the total height and margin of your p tag)
I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...
I am facing an issue with my HTML page where data is loaded dynamically into accordions. The accordion functionality is implemented inside a function, which is called at regular intervals to refresh the data. Initially, the accordion displays correctly, bu ...
Does anyone know of a code snippet that can make a couple of div elements fade out after a specific time period? Currently, I have the following example: <div id="CoverPop-cover" class="splash"> <div id="CoverPop-content" class="splash-center"> ...
Hello wonderful community of Stackoverflow, Here is my CSS code: .text:not(#overview > *) { margin-top: 10px; margin-bottom: 10px; } I am trying to apply a 10px top and bottom margin to everything with the class "text", except for elements ma ...
I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based o ...
It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both ...
Currently, I am utilizing HTML5 data attributes to save information such as the targeted DOM element and to initialize events using jQuery's delegation method. An example of this would be: <a href="#" data-target="#target" data-action="/update"> ...
I am currently using ngx-editor within Angular 7. My goal is to insert HTML at the cursor's position upon clicking on parameters from a list. The current view displays how the parameter is appended when clicked, as shown in the image attached . My de ...
Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup. I attempted using a pseudo-element like so: summary:before { content: '\25BC'; } summary:before + .hide { con ...
I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...
I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...
I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \"). Even after using the htmlspecialcharacters_decode function, the problem p ...
In this scenario, my goal is to securely bind attr and attr1. These two variables should be independent from the variable data, unlike other attributes in use. I want each iteration to have its own set of bound components, rather than sharing one data obje ...
I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...
While working on my HTML form, I encountered an issue regarding the display of a warning message notifying users about the caps lock being on. Currently, the warning is shown correctly in a div located to the right of the text box. However, this div's ...
I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...
As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...
I am working on an Angular (6) web app with a customized theme using Angular Material. Currently, I am trying to incorporate a popup dialog that includes basic HTML elements like checkboxes, buttons, and inputs. Even though I have successfully displayed ...
Here is a snippet of HTML code to work with: <ul id="tree"> <li> <a href="">first</a> <ul> <li><a href="">subfirst</a></li> <li><a href=""> ...
This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...