What is the best way to center a div vertically on the page?

I've utilized Bootstrap 3 to create this row:

<div class="cart">
<div class="row border">
  <div class="col-md-8 desc pad itemsheight">
    <div class="col-md-12">
      <!-- react-text: 141 -->Docos
      <!-- /react-text -->
      <!-- react-text: 142 -->channel package
      <!-- /react-text -->
    </div>
    <div class="col-md-12 small"><a href="">Change</a>
      <!-- react-text: 145 -->|
      <!-- /react-text --><a href="">Remove</a></div>
  </div>
  <div class="col-md-2 desc grey pad itemsheight"></div>
  <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div>
</div>
  </div>

My concern is that the text isn't perfectly aligned in the center vertically. I attempted using vertical-align but it didn't work. Check out another example here: http://codepen.io/gekkerkanniet/pen/jVKoyR

htmlcsstwitter-bootstrap-3

Answer №1

Implemented flex display to achieve vertical alignment of the contents.

.centerItemsVertically {
    display: flex;
    align-items: center;
}

Height attributes were removed from individual elements and instead applied to the parent element only for easier height adjustments.

View the demonstration here

Answer №2

Give this a try, it might be beneficial

/*************Styling for Cart******************/
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}
// apply to parent if dealing with an inline element 
.text-center {
   text-align:center
}
.children{
  
   
    position: relative;
    top: 35%;
    transform: translateY(-50%);
}

.cart .pad {
  margin-top: 8px;
  padding: 2px;
}
.cart .padheader {
  padding: 17px;
}
.cart .border {
  border: solid 0.5px;
}

.cart .right {
  text-align: right;
}
.cart .costs {
  padding: 2px;
  margin-top: 10px;
}
.cart .medium {
  font-size: 24px;
  line-height: 53px;
}
.cart .small {
  font-weight: bold;
  font-size: 14px;
}
.cart .itemsheaderheight {
  height: 68px;
}
.cart .itemsheight {
  height: 97px;
}
.cart .space {
  padding: 17px;
}
.cart .grey {
  background-color: #f7f7f7;
}
.cart .yourorder {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 300;
  text-align: left;
  color: #333333;
}
.cart .price {
  font-family: Helvetica;
  font-size: 40px;
}
.cart .desc {
  font-size: 16px;
  font-weight: bold;
}
.cart .border-bottom {
  border-bottom: lightgray solid 0.5px;
}
.cart .border-top {
  border-top: lightgray solid 0.5px;
}
.cart .collapse {
  display: none;
}
.cart .collapse.in {
  display: block;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Created by Derk Ingen</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="cart">
<div class="row border">
  <div class="col-md-8 desc pad itemsheight center-block">
    <div class="col-md-12 text-center children">
      <!-- react-text: 141 -->Docos
      <!-- /react-text -->
      <!-- react-text: 142 -->channel package
      <!-- /react-text -->
    </div>
    <div class="col-md-12 small text-center children"><a href="">Change</a>
      <!-- react-text: 145 -->|
      <!-- /react-text --><a href="">Remove</a></div>
  </div>
  <div class="col-md-2 desc grey pad itemsheight"></div>
  <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div>
</div>
  </div>
  
  
</body>
</html>

Answer №3

One option to consider is using the CSS properties display: table for the parent element and display: table-cell for the child element. This setup allows you to vertically center align the content while also ensuring browser compatibility.

Answer №4

If you're looking to center an element on your webpage, here's a CSS code snippet you can try:

#centerElement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Simply replace #centerElement with the ID of the element you want to center. Feel free to adjust the left position as needed. Happy coding!

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

Is it a Mozilla Firefox glitch or something else?

After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

javascriptjqueryhtmlfirefox

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I am putting the final touches on my website and realized that it may be difficult to promote specific sections of the site because the browser address never changes. When visitors click on links, they open in a div using Ajax coding. However, if I want to ...

javascripthtmlajax

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

Whenever I attempt to call getHistoryData() from the HTML, an error message "ERROR TypeError: Cannot set property 'id' of undefined" appears. export class Data { id : string ; fromTime : any ; toTime : any ; deviceType : string ...

htmlangulartypescript

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

As a beginner in Angular, my goal is to create a feature where: The character count in a label increases as text is entered into a textarea. When the backspace key is pressed, the counter should decrease. If the user attempts to enter more characters tha ...

htmlangular

Bind a function to the final element of each piece of changing content

I'm facing a challenge in associating a function with every nth element, just once for each element. The concept is to trigger an ajax call when the final element comes into view. I am utilizing a useful jquery plugin called inview. My list consists ...

jqueryhtmlajax

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

Enhancing the appearance of a PHP HTML email

I scoured the web for an answer to this question and all I could find was to include the following: $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; and ...

phphtmlcssemailphpmailer

add text nodes with unnecessary quotation marks around my selection list

Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...

javascripthtmlajaxweb-applications

Enhance your Underscores Wordpress Theme by incorporating a secondary sidebar option

Started a new Wordpress site using the Underscores theme (_s) Successfully added one sidebar, but now looking to add a second one with different widgets on the same page. After adding the new sidebar to the functions.php file and seeing it in the Wordpre ...

phphtmlwordpressthemessidebar

Transferring data between pages using HTML5 and jQuery

I'm currently developing Windows Phone 8 apps using HTML5 and jQuery. My project involves two HTML pages - the first page consists of input boxes and a button, while the second page contains controls to display the data entered on the first page. Upon ...

jqueryhtmlwindows-phone-8

Employ the v-model directive in conjunction with a checkbox in scenarios where v-for is implemented with the properties of an object

When utilizing v-model with a checkbox in conjunction with an array of objects, it functions correctly: new Vue({ el: '#example', data: { names: [ { name: 'jack', checked: true }, { name: 'john', checked ...

javascripthtmlvue.jsvuejs2

Missing information from PHP contact form fields

I've been struggling with this issue all day and I can't seem to figure it out on my own. The solution is probably right in front of me... My contact form is mostly functional, but for some reason, I'm not receiving input for all fields. On ...

phphtmlformstwitter-bootstrapcontacts

Troubleshooting a Vue.js formatting problem in Visual Studio 2019

Encountering an issue with VS2019 while attempting to format this code section. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="milestone.ascx.cs" Inherits="uc.dms.milestone" %> <section class="content-header"> <h1> ...

javascriptc#htmlvue.jsvisual-studio-2019

Storing a JSON object within a data attribute in HTML using jQuery

In my HTML tag, I am storing data using the data- method like this: <td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td> When retrieving the data in a callback, I use: $(this) ...

jqueryhtmljson

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

javascripthtml

Element that moves in conjunction with scroll (without using position:fixed)

A while back, I stumbled upon something that I can't seem to find now. I'm looking for a shopping cart similar to the one on the Apple store - a div element that isn't positioned absolutely or fixed. Ideally, it would be located in the cente ...

jquerycss

Having trouble capturing a photo from webcam using HTML5 and getUserMedia() in Google Chrome upon initial page load

Using the information from an article on HTML5Rocks, I am attempting to create a tool that can capture photos from a webcam. Here is an excerpt of my HTML code: <button type="button" name="btnCapture" id="btnCapture">Start camera</button>< ...

javascripthtmlhtml5-canvashtml5-videowebcam

Clicking on a dynamically generated link will not result in the file being downloaded

I have a list of document names and IDs retrieved from a database, displayed in an unordered list like this: <ul id="list"> <li onmouseover="onHover(docNumber)"> <a herf="#" id="docNumber">DocName</a> </li> </ ...

javascriptjqueryhtmlajaxbase64

Is there an alternative to using CSS units of measurement when using the .css() method?

Is there a way to use .scrollTop() and .css() to adjust the margins of an element so that it floats up only when the page is scrolled, but stops at a certain margin value? I want the element to float between specific values while scrolling. The issue I am ...

jquerycss