CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
bier hier
bier hier

Reputation: 22520

How to align div vertically in the middle?

I have created this row with bootstrap 3:

<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>

The issue is that the text is not aligned in the middle vertically aligned. I tried to use vertical-align but does not work? Here is another sample: http://codepen.io/gekkerkanniet/pen/jVKoyR

Upvotes: 5

Views: 13304

Answers (4)

Nickgaming
Nickgaming

Reputation: 13

You can try the code:

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

Just change the #myTextId to whatever you want to be centered. Change the left position if you want. Idk.

Upvotes: 0

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

You may try with css property display: table to parent and display: table-cell to the child, Where we can achieve the content to align vertically centre and it also have an browser compatablity.

Upvotes: 0

Sen Jacob
Sen Jacob

Reputation: 3442

I used flex display to vertical align the contents.

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

Also removed height from each individual elements and applied to parent element only. This will be easier to change height.

See it in action

Upvotes: 6

Ganesh Putta
Ganesh Putta

Reputation: 2671

try this, may be this will help you

/*************Cart******************/
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}
// in case your dealing with a inline element apply this to the parent 
.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>A Pen 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>

Upvotes: 1

Related Questions