Alignment of label not remaining centered vertically, issue with bootstrap

Struggling with getting this label to stay centered vertically? It always seems to appear at the top. Any help would be greatly appreciated. Thank you!

Check out the code here

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div><span class="label label-default pull-right">New</span>
        </div>
        <div class="col-md-4">Text</div>
        <div class="col-md-4">Text</div>
    </div>
</div>
@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
    margin-top: 25px;
}
.row {
    margin-bottom: 20px;
}
.row .row {
    margin-top: 10px;
    margin-bottom: 0;
}
[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86, 61, 124, .2);
}
hr {
    margin-top: 40px;
    margin-bottom: 40px;
}
.innertext {
    display:inline-block;
    width:90%
}

Answer №1

To make the label display correctly, you should remove the class pull-right and apply the following properties:

.label {
   display:inline-block;
   vertical-align:middle;
}
.innertext {
    vertical-align:middle;
}

Feel free to check out this Demo Fiddle for a demonstration.

Answer №2

To center your label vertically, you can use the following CSS properties: position: absolute;, top: 50%;, and margin-top: -x; (make sure to include the negative sign), where x is half the height of your label. Don't forget to also add position: relative; to the parent element of the span. This will ensure that your label remains centered in the middle of the parent div.

If this solution meets your needs, great! If not, please provide additional details.

You can view a modified version of your code in this working fiddle: http://jsfiddle.net/r0gsewtd/

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

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

Creating a customized notification icon featuring a count of notifications

I am trying to add a notification icon to my website similar to Facebook. On Facebook, the notification icon is displayed in the top left corner with a number indicating the total notifications. I would like to replicate this feature on my site as well. Be ...

Display dynamic web content developed with JavaScript for public viewing

As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...

The impact of Opacity CSS on child elements in web design

Struggling to show an error message when a user disables JavaScript. In my current work, I have two div layers - one covering the entire page and another on top to display the warning message. However, I'm facing issues with the opacity settings affec ...

What is the best way to embed a webpage into another webpage using frames?

I need help embedding an iframe on my website, , to display the items I am selling on eBay. This is my first time attempting to create an iframe. ...

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

Pointer-enhanced Material UI Popup

Is there a way to implement a Popup that looks like the image provided using @Material-ui? https://material-ui.com/ I attempted to use Popover, however Popper does not include a pointer like in the image. https://i.stack.imgur.com/atz0G.png ...

Exploring NodeJS Express Routing Across Various URIs/URLs

In my application, there is a public folder that contains HTML/CSS3/JS code. This folder has two main parts: one with the public facing index.html inside public/web and another with an admin view exclusively for admins. Below is the basic layout: public ...

Encountering a challenge while attempting to adjust the navigation bar at the top as the user scrolls through the page

I've been working on making the navigation bar stay fixed at the top of the page when the user scrolls, but I'm running into some issues. It seems that certain elements are overlapping the navigation bar, causing them to hide the navigation bar a ...

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

The duplicate code is failing to display any output

Welcome to my first question here! Please excuse any rookie mistakes. I am currently working on a specialized calculator using HTML, JS (with jQuery), and CSS. This calculator is designed to handle multiple inputs and perform various calculations on a sing ...

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

Can pure Javascript be used to integrate Bootstrap pagination into a Bootstrap table?

I have created a custom JavaScript code to generate a Bootstrap table with hardcoded values. Now, I am looking to implement Bootstrap pagination using JavaScript only. var table = document.createElement("table"); table.className = "table"; var the ...

Utilizing the Invision prototype for embedding

They provided me with this code snippet <iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe> However, I am unsure of how to properly embed it. I attempted to insert the line into my website but ...

Utilizing Angular Material for Styling the Web

https://i.sstatic.net/GVcgu.png I am new to working with Angular and currently, I have a sidenav container with the content being a mat toolbar. My issue is that when viewed on a full-sized desktop, the background color of the toolbar stretches and fills t ...

I attempted using the regex pattern (09)[0-9]{89}, but unfortunately it does not satisfy the validation criteria I need

I attempted to use a regex expression for validation in both HTML forms and server-side validation in Laravel. However, the expression I used (i.e (0\9)[0-9]{8\9}) did not fulfill the criteria for validation: The number must start with either 0 o ...

Tips for creating responsive headings in Bootstrap

I've recently been developing a bootstrap website and have encountered an issue with the heading (h1) size on smaller screens. While everything else scales properly, the heading remains fixed and ends up being too large for small screens. How can I ad ...