垂直居中对齐

Question

#page-header {
    display: table;
    font-size: 26px;
    margin-bottom: 30px;
}
#page-header div {
    display: table-cell;
    vertical-align: middle;
}
.fontHelvetica {
    font-family: "Trebuchet MS",Helvetica,sans-serif;
}

<div id="page-header">
  <div class="fontHelvetica">Social<span class="fontLightMaroon">Network</span></div>
  <div><input type="submit" value="Upload" name="upload"></div>
 </div>

我想将中间的按钮与文本对齐 "SocialNetwork"。字体大小可能会改变，因此按钮应该居中对齐。我正在使用上面的代码。

Answer 1

删除 input 按钮的 div 包装，并为 input 赋予如下样式。无论 font-size.

是什么，按钮都将保持与中间垂直对齐

#page-header {
  display: table;
  font-size: 26px;
  margin-bottom: 30px;
}
#page-header div {
  display: table-cell;
  vertical-align: middle;
}
#page-header input {
  vertical-align: middle;
  display: table-cell;
  margin: -5px 0 0 5px;
}
.fontHelvetica {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

<div id="page-header">
  <div class="fontHelvetica">Social<span class="fontLightMaroon">Network</span></div>
  <input type="submit" value="Upload" name="upload" />
</div>

示例不同 font-size:

#page-header {
  display: table;
  font-size: 36px;
  margin-bottom: 30px;
}
#page-header div {
  display: table-cell;
  vertical-align: middle;
}
#page-header input {
  vertical-align: middle;
  display: table-cell;
  margin: -5px 0 0 5px;
}
.fontHelvetica {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

<div id="page-header">
  <div class="fontHelvetica">Social<span class="fontLightMaroon">Network</span>
  </div>
  <input type="submit" value="Upload" name="upload" />
</div>

Answer 2

问题在于显示：table-cell，它不允许在第一个 div.

之后换行

我在这里创建了一个 fiddle 来打破这条线，使按钮被视为 "text" 块（显示：内联块），并将其与

居中对齐

text-align: center;

http://jsfiddle.net/gn4jqLea/

Answer 3

我有插入 css 属性 display:inline-block;font-size:2em;在 fontHelvetica class

#page-header {
    display: table;
    font-size: 26px;
    margin-bottom: 30px;
}
#page-header div {
    display: inline-block;
    vertical-align: middle;
}
.fontHelvetica {
    font-family: "Trebuchet MS",Helvetica,sans-serif;
  display:inline-block;
  font-size:2em;
}

<div id="page-header">
  <div class="fontHelvetica">Social<span class="fontLightMaroon">Network</span></div>
  <input type="submit" value="Upload" name="upload" />
</div>

Answer 4

问题是 <input> 没有正确接收继承字体 size/line 高度，这取决于浏览器和 OS。您可以做的是仅在 "SocialNetwork" 上设置大字体，即

#page-header {font-size: 26px;} /*remove this*/
.fontHelvetica {font-size:26px;} /*add this*/

演示： http://jsfiddle.net/f43ut27s/

垂直居中对齐

Vertical middle alignment

html

css

alignment