Update the height definition for the alert box

I need to adjust the height of my alert box, so I attempted the following:

  @alert-box: 60px;

  .alert-msg {
    height: @alert-box;
    margin: 20px 0px;
  }

However, the outcome was

In the image provided, it is evident that the text within the second box is not vertically centered. Here is the HTML part

  <div class="col-md-5 col-md-offset-1 portfolio-item">
    <div class="alert alert-danger alert-msg" role="alert">
      <span>Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
  </div>

Is there a way to center the text within the box?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

It wasn't a simple task - http://jsfiddle.net/77p1pw39/1/

You must enclose the text in a <span class="centered">.

<div class="alert">
    <span class="centered">text</span>
</div>

Here is the CSS code:

.alert {
    width: 300px;
    height: 60px;
    margin: 0 0 20px;
    background: #ccc;
}
.alert:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -5px;
}

.alert .centered {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 0 15px;
}

Credits to Chris Coyier, I'm truly amazed by the technique, it's brilliant!

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

Reviewing user input for any inappropriate characters using jQuery's functionality

When a username is inputted into the input box, I want to make sure that only valid characters are accepted. The following code shows what I have so far; but what should I replace "SOMETHING" with in the regular expression? var numbers = new RegExp( ...

javascriptjqueryhtml

Display the scroll bar in HTML only when the content exceeds the maximum height

I am trying to display a scrollbar only if the content is larger than the specified max-height. However, it seems that the scrollbar is always enabled. <div style="text-align: left; font-size: 1.5rem; max-height: 7rem; overflow-y: auto;"& ...

htmlcss

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

htmlcss

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

Tips for placing text on top of an image within a <p> element

I am grappling with a situation where I have a div containing text within <p> tags, and also an accompanying PNG image. My goal is to position the image to the left of the div so that it overlaps with the text. Despite my attempts at utilizing z-inde ...

htmlcssz-indexoverlap

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss

Ways to achieve perfect alignment for SVG text within its container, as opposed to stretching across the entire webpage

Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facin ...

jqueryhtmlcsssvg

How can you check the varying font renderings on your phone?

https://i.sstatic.net/z7HcQ.png https://i.sstatic.net/1tH5d.png Having some trouble with the font display on my website. Currently using: font-family: 'Fredoka One', cursive; It's working well on PCs and desktops, but when viewed on a pho ...

htmlcss

How to precisely navigate to a particular row in a GWT FlexTable

Is it possible to scroll a flextable to a specific selected row? I am attempting to implement functionality where I have two panes, LeftView and RightView. When an item is selected on the RightView, the FlexTable in the LeftView should automatically scrol ...

cssgwtscrollflextable

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps to Embed a Link in a Jumbotron's Background Image

I'm facing a challenge with my jumbotron that has a background image. I want to make the image clickable so that it redirects to another page when clicked. I attempted to add an image tag with a src attribute, but it ended up overlaying another image ...

htmlcssbootstrap-4

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

javascripthtmlarrays

Is your idTabs design in need of some sprucing up

Just stumbled upon idTabs and trying to implement a basic one on my server. I've taken the code from the 'Usual' page, included the plugin file and jQuery, but all I'm seeing is... - Tab 1 - Tab 2 - Tab 3 This is tab 1. Seems like it& ...

javascripthtmlcsstabs

Merge floating and absolute positioning techniques

Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...

javascripthtmlcsscss-floatabsolute

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

javascripthtmlcss

Rotating an object with the mouse in three.js without relying on the camera movements

I am working on a project where I need to create multiple objects and rotate each of them individually using the mouse. While I have been able to select an object with the mouse, I am facing challenges when it comes to rotating them with the mouse. Cur ...

htmlthree.js

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

javascriptcsstwitter-bootstrapcarouselvue.js

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

htmlcssbootstrap-5

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

Find all relevant employee information at once without the need for iteration

I have structured two JSON arrays for employee personal and company details. By inputting a value in the field, I compare both tables and present the corresponding employees' personal and company information in a unified table. <html> ...

javascripthtml