What is the best way to horizontally align text within a div container using CSS?

I am seeking advice on how to center the text in paragraph elements both vertically and horizontally inside the red box div elements. I have attempted to use vertical-align: middle but it doesn't seem to be working. Any assistance would be greatly appreciated, thank you.

Visit this link for reference

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
}

.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}

#wrapper {
    text-align:center;
}

p {
    display:inline-block;
    vertical-align:middle;
}
htmlcsscentering

Answer №1

Include a line-height attribute in your div, then set it as normal in your text component.

.clear-button {
    line-height: 100px;
    text-align: center;
}


span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

And indeed, this method is effective even with multiple lines of text:

See the demonstration here: http://jsfiddle.net/9NLtB/12/

Answer №2

To adjust the spacing between lines, you can utilize the line-height property:

p {
    display:inline-block;
    vertical-align:middle;
    line-height: 55px;
}

Check out this fiddle for a live example.

Answer №3

check out this code snippet

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:top;
}

p {
        display:inline-block;
        vertical-align:middle;
    line-height: 50px;
}

VIEW DEMO

Answer №4

This approach is worth considering:

JSBin demo

For the element with class .transparent-btn, apply display:inline-table; and vertical-align:top;. Next, modify the CSS for paragraphs as follows:

p {
    display:table-cell;
    vertical-align:middle;
}

Answer №5

Try adding line-height:100px; without the p tag to see its effect.

Check out the demo here: http://jsfiddle.net/3JKuR/4/

To align the divs, don't forget to include float left:

display:inline-block;
float:left;

Answer №6

p {
    padding-top: 50px;
    margin-bottom: 10px;
}

Answer №7

you can also try implementing the following code snippet http://jsfiddle.net/9NLtB/11/

In this updated version, I included span along with applying styles for display:table and display:table-cell

Answer №8

Solved your issue, check out this Text-Aligned solution

This technique is considered the most effective by just adding 2 CSS rules 

vertical-align:middle;
line-height:100px;

and eliminating unnecessary <p> tag

You have the ability to align everything both horizontally and vertically! All you need to do is set the line-height the same as the container height and apply vertical align middle (in this case, with a container height of 100px, use a line_height of 100px simply!

CSS

 .transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    line-height:100px;
}
.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}
#wrapper {
    text-align:center;
}

HTML

<div id="wrapper">
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
</div>

Answer №9

It appears that the buttons with text are slightly lower than the empty ones in your example, which may not be the desired outcome.

To address this, you can use display: table; on the #wrapper and display: table-cell; on the .transparent-btn

#wrapper {
    display:table;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px;
}

.transparent-btn {
    display: table-cell;
    vertical-align: middle;
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    box-shadow:0px 0px 12px #2e2300;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    text-align: center;
}

p {

}

The use of margin: 5px; on .transparent-btn is no longer effective once it's set to display: table-cell;. Therefore, utilizing border-collapse: separate; and border-spacing: 5px; would be more appropriate.

Furthermore, ensure that the unprefixed versions of border-radius and box-shadow come after the prefixed versions for consistency.

You can view the updated code on: JsFiddle

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

Differences between HTML and JSON data in AJAX response

Currently, I am facing a challenge in loading data on the frontend and displaying it. One option is to retrieve the data as a JSON object and generate HTML elements based on it. The alternative approach involves fetching HTML data directly from the backend ...

htmlajax

Dropdown menu change event malfunctioning

I am facing an issue with my HTML form that contains multiple text fields and dropdowns. I need to loop through all the dropdowns for validation purposes. Initially, only the first dropdown is visible when the page loads. The rest of the dropdowns become v ...

jqueryhtml

Table formatting problem

I am looking to add borders only below each row in my table. td{ border-bottom-style: solid;} However, I am noticing a visible border break between columns. Can anyone advise on how to remove that? ...

htmlcsscss-tables

How to make Jquery skip over elements with a particular data attribute

I am looking to select all elements that are labeled with the 'tag' class. Once these items have been selected, I would like to remove any items from the list that contain the attribute 'data-tag-cat'. var tags = $('.tag'); c ...

javascriptjqueryhtml

Disabling the .hover function temporarily

I am currently exploring how to temporarily disable the .hover function in jQuery based on a specific event that occurs on the page. You can view my current jsfiddle here: http://jsfiddle.net/4vhajam3/3/ (please note that I have omitted some code for simp ...

javascriptjqueryhtml

Steps to Create an HTML Text Box that cannot be clicked

Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events? I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an opti ...

javascripthtmlcss

Retrieve data from multiple inputs with the same name in a Spring MVC form

I have a JSP page with input fields that can be dynamically added or removed. I need to map these input fields to the @ModelAttributes in Spring MVC, but I'm unsure of how to do this. I want to submit a form that includes: <form enctype="multipar ...

javahtmlspringformsjsp

Ways to transmit data from Server to HTML within the Servicenow Service Portal

After retrieving data on the server side, I am looking to populate the created HTML table with this data. The following is my HTML code for generating a table with rows and columns: <div class="panel panel-body"> <h2>Book Rooms v1& ...

htmlangularjsservicenow

Are max-width:auto and max-width:100% the same thing?

Does max-width set to auto have the same result as setting max-width to 100% If not, what is the distinction between them? ...

htmlcss

Show a grid layout featuring varying heights using HTML

I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height. Below is my HTML code: <div class="blog_main_midd_section"><ul> ...

htmlcssgridviewgallery

Creating a responsive 'media object' in Bootstrap 4: Tips and tricks

I have a media object that displays an image with text next to it, and it looks good on larger screens. However, when I switch to a smaller screen, the text overflows and the images appear in different sizes and positions. <div class="container&quo ...

htmlcssbootstrap-4media-queries

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascripthtmlnode.jsjsonelectron

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

javascriptcssvue.jsswiper.jsautoplay

Changing the background image of the body when hovering over a li element: a step-by-step

For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...

javascriptjqueryhtmlcss

Example of Image Slider using AngularJS

<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...

angularjscss

Navigating through Ruby on Rails' index routes

I have set up an index for the object "request". Each request has an address and a body. I configured the index to display the address as a link, with the intention of directing users to the show page of that specific object. However, when I click on the l ...

htmlruby-on-railsruby

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css

The text loader feature in THREE.js is failing to load

My first attempt at coding THREE.js resulted in a black screen when I tried to load the Text loader. Can someone help me resolve this issue? I kept getting the following error even after multiple attempts: three.module.js:38595 GET 404 (Not Found) ...

javascripthtmlcsstextthree.js

Elements featured in the header: logo, tagline, graphics, and more

I'm interested in designing a schema with the following elements: I'm contemplating whether it would be beneficial to have a separate container for the logo and slogan. Additionally, I am considering if it is advantageous to create a container f ...

css

Maintain the original canvas aspect ratio while resizing the browser window

I am working with a canvas that has a width and height set to 100%. It occupies the entire screen, and I have drawn an image on it. My goal is to maintain the original aspect ratio of the image when resizing the browser window. I am looking to achieve the ...

javascripthtmlcanvasaspect-ratio