Question

我试图垂直对齐两个不同高度和宽度的div，我在页面上水平居中。文本对齐似乎没有做任何事情，我希望有一个我不在的解决方案。

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>

Answer 1

只需添加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>

Answer 2

我为text-align: left div设置.contact，为{两者设置vertical-align: middle（因为它们是内联块）

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

Answer 3

您可以使用flexbox

.center {
  align-items: center;
}

您可以在此处找到flexbox文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

在你的css中使用此功能

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

垂直对齐：中部;将你的div之间的中间数据改为

垂直居中不同高度的直线块元素

4 个答案: