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

删除div按钮的input包装，并为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

问题在于display：table-cell，它不允许在第一个div之后进行换行。

我在这里创建了一个小提琴，打破了这一行，使按钮被视为“文本”块（显示：内联块），并将其与中心对齐

text-align: center;

http://jsfiddle.net/gn4jqLea/

Answer 3

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

中

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

问题是<input>没有正确接收继承字体大小/行高，这取决于浏览器和操作系统。您可以做的是仅在“SocialNetwork”上设置大字体，即

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

DEMO： http://jsfiddle.net/f43ut27s/

垂直中间对齐

4 个答案: