CODEWITHSUNDEEP
htmlcss
Jordan U.
Jordan U.

Reputation: 323

Vertically Centering In-line Block Elements Of Different Heights

I'm attempting to vertically align 2 divs with different heights and widths, which I've horizontally centered on the page. Text-align doesn't appear to do anything, and I was hoping that there was a solution that I'm missing.

CSS

.center {
    text-align: center;
}
div#map {
    background: blue;
    display: inline-block;
    height: 250px;
    margin: 10px 15px;
    width: 300px;
}
div.contact {
    display: inline-block;
    margin: 10px 15px;
    overflow: auto;
    text-align: center;
    width: 350px;
}

HTML

<div class="center">
   <div id="map">...</div>
   <div class="contact">...</div>
</div>

Upvotes: 1

Views: 2855

Answers (4)

Johannes
Johannes

Reputation: 67748

I'd set text-align: left for the .contact div and vertical-align: middle for both (since they are inline-blocks)

http://codepen.io/anon/pen/QdNaoJ

Upvotes: 1

NARGIS PARWEEN
NARGIS PARWEEN

Reputation: 1596

User this in your css

div#map,div.contact {
   display: inline-block;
   vertical-align:middle;
}

vertical-align:middle; will aling the data in middle between your div

Upvotes: 0

mickaelw
mickaelw

Reputation: 1513

You can use flexbox

.center {
  align-items: center;
}

You can find the flexbox documentation here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

Just add vertical-align: middle:

div#map,
div.contact {
  vertical-align: middle;
  display: inline-block;
}


.center {
  text-align: center;
}
div#map {
  vertical-align: middle;
  background: blue;
  display: inline-block;
  height: 250px;
  margin: 10px 15px;
  width: 300px;
}
div.contact {
  vertical-align: middle;
  display: inline-block;
  background: green;
  margin: 10px 15px;
  overflow: auto;
  text-align: center;
  width: 350px;
}
<div class="center">
  <div id="map">...</div>
  <div class="contact">...</div>
</div>

Upvotes: 3

Related Questions