Center text vertically within a Bootstrap grid system

I've searched far and wide on Google, Stack Overflow, and other sources for solutions to vertically align text within my code, but I'm struggling to make it work.

My code features a form where users can input a 'doom name' and the text will appear on an image.

All I want is to perfectly align the entered text on the image so it looks natural when printed in real life.

I've attempted different methods, but as this is my first website, troubleshooting has proven to be quite challenging.

Check out this Bootply link for reference: http://www.bootply.com/NQWhZArz7D

Thank you!

(No need to worry about responsive issues, they're all addressed in my code)

Edit: The solution must support entering multiple lines of text.

htmlcsstwitter-bootstrap

Answer №1

If you want to center text vertically, one way to do it is by setting the line-height to be the same as the height.

For example:

.centering{
     line-height:324px;
   }

Check out the demo here

This method works well for single lines of text. However, if the text wraps onto multiple lines, the line height will be applied to each line. So choose your method based on your specific requirements.

Another approach is to use display:table and display:table-cell to achieve vertical alignment.

For example:

<div class="col-xs-12 table">
    <p class="centering text-center">Toaster Apocalypse</p>
</div>

Additionally, set its parent container to have display:table.

See the demo in action here

For more centering techniques, take a look at some examples here.

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

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...

cssfont-faceunderline

What is causing a scroll bar to appear at the bottom even though my content is not overflowing?

Here is the situation I am trying to describe: http://jsfiddle.net/CvgFS/1/ My English skills are not strong enough to explain it clearly, but I hope you can see why I am getting a scroll bar even though the content fits the page. This issue is happening o ...

htmlcss

Developing a touch-enabled mobile keypad with jquery

I've developed a number keypad with Javascript. Each time a button is clicked, the following actions are taken: List of buttons: <input type="button" value="2' class="num-key" onclick="insertvalue(this.value)"> <input type="button" valu ...

javascriptjqueryhtml

Working with AngularJS to Create Repeated Divs and Buttons

Currently, I'm looking to utilize ng-repeat to iterate over a div that contains a button. At the moment, I am achieving this by generating the div and button in the JavaScript section and then adding the final outcome to an array: var newDiv = docum ...

javascripthtmlangularjs

Targeting HTML tags, styling names, and class names using CSS

In the markup below, I am trying to target three specific points using CSS. img style*=right class=media-element I attempted to use the code below, which did not work: img[style*="right"][class="media-element"] {margin-left:10px;} However, selecting t ...

htmlcsscss-selectors

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

Learn how to extract data located between two specific tags using Java HtmlUnit

<span> <a></a> Hello <div>A plethora of irrelevant text</div> </span> My goal is to retrieve only the "Hello" from the webpage. While I can use XPath to target the span, calling .getTextContent() also includes the text ...

javahtmlhtmlunit

The process of creating a functional search bar in Django

I created a search bar, but I am facing an issue where no titles appear until I start typing. Once I type in one title, all the titles suddenly appear. How can I fix this problem? index.html def index(request): query = request.GET.get('srh' ...

pythonhtmldjango

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Do not request for this element within the array

I have a function that applies to all elements in an array, except for the currently clicked one. For example: cubesmixed = [array, with, 145, elements] cubesmixed[54].click(function() { for(var i = 0; i < 145; i++) { var randomnumber=Math.flo ...

javascriptjqueryhtmlarrays

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am in the process of creating a horizontal family tree. Where I'm At - I am currently working on setting the CSS Line-Height to vertically center each item based on nested content. The Issue - The Line-Height value for nested items keeps growing e ...

jqueryinheritancenestedcss

Utilizing Bootstrap 5 to showcase a variety of images that adapt to different screen sizes

Using Bootstrap 5, I am attempting to utilize an img tag to showcase a different image depending on the device - mobile, tablet, or desktop. However, I am facing challenges in correctly setting the breakpoints for the wrapper divs using the display utiliti ...

htmlcsstwitter-bootstrapbootstrap-5

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

I'm currently building a website for a fictional ice cream shop to enhance my JavaScript skills. function hideAAndB() { var pickupDiv = document.getElementById("pickupDiv"); var deliveryDiv = document.getElementById("deliveryDiv"); pickupDi ...

javascripthtmldomparameters

Vertically arrange the table for better visibility

I need help with changing the table layout from horizontal to vertical. Currently, all fields are displayed horizontally and I want them to be displayed vertically. Also, I'm trying to add a functionality where the current date is added to the databas ...

phphtmlcssmysql

Placing <IconButton> at the bottom right of <Paper> using React and Material UI without utilizing FAB

Issue: I'm working on implementing a react/material-ui design where I want to show an edit icon floating in the bottom right corner of a paper element. I've managed to get it to float in the bottom right of the entire screen, but that's not ...

cssreactjsmaterial-ui

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Creating nested columns in a bootstrap grid system can enhance the structure and organization of your

I am currently attempting to use Bootstrap grid to create nested columns, but unfortunately, the layout I am getting is not nested as intended. {% for home in home %} <div class="container"> <div class="row" ...

htmlcssdjangobootstrap-4

Combining Text and Images with a Background Video using CSS

I need help replicating a unique design I came across in a graphic design mockup. It involves a background video with a transparent green overlay, an image of a man fixed to the right side, and text flowing over it. I've managed to recreate most of it ...

cssbootstrap-4