How to Vertically Align Two or More (Side by Side) Elements in a Div

How to vertically align two or more (side by side) elements in a div?

Put the vertical align on the inner divs

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}

Vertically align two side by side elements to each other

You can't use float and inline block at the same time. I'd try removing the floats.

Then it's a matter of reseting the whitespace between the inline block elements.

* {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  margin: 0;  padding: 0;}#container {  width: 80%;  margin: 0 auto;  border: 1px solid green;  font-size: 0;  /* whitespace fix */}#container > * {  font-size: 1em;  /* reset font-size */}#chart {  width: 50%;  display: inline-block;  vertical-align: middle;  background: red;  height: 50px;}#dataTable {  width: 50%;  display: inline-block;  vertical-align: middle;  height: 150px;  background: blue;}

<div id="container">  <svg id="chart"></svg>  <div id="dataTable"></div></div>

Align 2 divs side by side vertically centered of the page

you can use display: flex;align-items: center; it is the best way to align center

.frame-work {
    text-align: center;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
}

like : https://jsfiddle.net/wxjd5z9w/9/

Align two elements in div container vertically and horizontally

You may use the flex model and add some left-padding to the header of the average size of the button, so the p can be quiet in the middle.

example:(added a gradient to show middle)

* {  margin: 0;}
body {  color: #ffffff;  background #4a4a4a;}
#header {  height: 60px;  background:linear-gradient(to right,transparent 50%, rgba(0,0,0,0.25) 50%),  linear-gradient(to top,transparent 50%, rgba(0,0,0,0.25) 50%)#313132;  display:flex;  align-items:center;  padding-left:2.75em;/* this should the width + eventually right margin of button so <p> can stand in the middle of container instead space left */}
#headerTitle {  font-weight: bold;  text-align: center;  font-size: 30px;  margin:auto;/* will center element */}
#menuBtn {margin-right:0;/* will pull to the right */}

<div id="header">    <p id="headerTitle">Title</p>    <button id="menuBtn">Menu</button>  </div>

Put Multiple DIVs Side-by-Side and Vertical Align Middle

try this one:

.file div
{width: 150px; height: 150px;  float: left; padding: 7px; border: 1px solid #000;display: flex;
align-items: center;
justify-content: center;
}

DEMO HERE

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

In a nutshell _{^{(and to prevent link rot)}}:

Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
- If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
- … there are more such special cases.

CSS to center vertically four divs side by side inside a wrapper div

Flexbox was designed to deal with exactly this sort of problem.

Just change display: inline-block; on your .checkout-item to:

display: flex;
flex-direction: row;
align-items: center;

display: flex explanation

flex-direction: row explanation

align-items: center explanation

Non-flexbox solution:

Use display: table and display: table-cell to match column heights:

.checkout-item {
    display: table;
}

.checkout-item > div {
  display: table-cell;
  float: none;
}

Vertically align content in side by side divs

Add display: flex and align-items: center for your .pecan-text. Demo:

.pecan-text {  display: flex; /* new */  align-items: center; /* new */}
.vertical-align {  display: flex;  align-items: center;  justify-content: center;  flex-direction: row;}
.bg-overlay {  /*background: linear-gradient( rgba(140,113,94, .9), rgba(140,113,94, .1));*/  background: linear-gradient(rgba(20, 20, 20, .7), rgba(20, 20, 20, .7));  position: relative;  display: table;}
.owl-bg {  background: url('https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg');  position: relative;  z-index: -1;  background-repeat: no-repeat;  background-size: cover;  background-position: center center;  color: white;}
.owl-ttl {  display: inline-block;  height: 100%;}
.owl-ttl-text {  position: relative;  z-index: 100;  color: white;  display: initial;  overflow: auto;  min-height: inherit;}
.owl-content-text {  position: relative;  z-index: 100;  color: white;  display: initial;  overflow: auto;  min-height: inherit;  padding: 4vh;  font-weight: 200;  padding-left: 6vw;}
.owl-bg:after {  clear: both;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="owl-bg col-md-12 col-xs-12">  <div class="row vertical-align ">    <div class="bg-overlay col-md-12 col-xs-12">      <div class="col-md-12 col-xs-12 text-center">        <div class="pecan-text">          <div class="col-md-5 col-xs-12 owl-ttl">            <span class="font-light owl-ttl-text">OWL</span><br/>            <span class="font-light owl-subt-text"><i>(Carya illinoinensis)</i></span><br/><br/>          </div>
          <div class="col-md-6 col-xs-12 text-justify owl-content-text">            <p>              Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for              silent flight. Exceptions include the diurnal northern hawk- owl and the gregarious burrowing owl.              <br /> Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.              <br /> Owls are divided into two families: the Strigidae family of true (or typical) owls; and the Tytonidae family of barn-owls.            </p>            <div style="clear:both"></div>          </div>
          <div class="col-md-1 col-md-4 col-xs-12"></div>        </div>      </div>    </div>  </div>

How to align two responsive divs vertically without using flexbox?

You can use display:table and display:table-cell.

.row{
  display:table;
  width:100%;
}

.column {
  display:table-cell;
  vertical-align:middle;
  width: 50%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display:block;
  }
}

vertical-align:middle keeps everything vertically aligned in the middle too.

Here's a CODE PEN so you can see

How to Vertically Align Two or More (Side by Side) Elements in a Div