Question

我有网站的HTML代码，但中心的<button>元素太过分了。这是我的代码：

h1
{
	text-decoration: underline;
}
/* Common Header */
body
{
	background-color: #d5d5d5;
}
.header button
{
	background-color:#8C481B;
	text-align:center;
}
button
{
	display:inline-block;
	border-radius:15px;
	height:50px;
	width:125px;
	font-size:20px;
}
button span .comingsoon
{
	color:#eeeeee;
	font-size:10px!important;
}
nav
{
	text-align:center;
}

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="CSS/index.css">
	</head>
	<body>
		<!-- Start Header -->
		<div class="header">
			<nav>
				<a href="index.html"><button type="button">Home</button></a>
				<!--First Case (unnamed)-->
				<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
				<!--Second Case (unnamed)-->
				<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
				<a href="help.html"><button type="button">Help</button></a>
			</nav>
		</div>
		<!-- End Header -->
		<h1>Coming Soon!</h1>
	</body>
</html>

如您所见，中间的按钮略高。为什么会发生这种情况，如何正确对齐它们？

Answer 1

内联元素的默认垂直对齐方式是＆＃34; baseline，＆＃34;这意味着元素的基线将与其父元素的基线相同。

如果您向父元素（nav）添加文字，您会看到每个按钮的第一个单词与它位于同一行：

要解决此问题，请将按钮的vertical-align设置为＆＃34; top＆＃34;或＆＃34;底部＆＃34;：

button {
  vertical-align: top;
}

＆＃13;

h1
{
	text-decoration: underline;
}
/* Common Header */
body
{
	background-color: #d5d5d5;
}
.header button
{
	background-color:#8C481B;
	text-align:center;
}
button
{
	display:inline-block;
	border-radius:15px;
	height:50px;
	width:125px;
	font-size:20px;
    vertical-align: top;
}
button span .comingsoon
{
	color:#eeeeee;
	font-size:10px!important;
}
nav
{
	text-align:center;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="CSS/index.css">
	</head>
	<body>
		<!-- Start Header -->
		<div class="header">
			<nav>
				<a href="index.html"><button type="button">Home</button></a>
				<!--First Case (unnamed)-->
				<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
				<!--Second Case (unnamed)-->
				<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
				<a href="help.html"><button type="button">Help</button></a>
			</nav>
		</div>
		<!-- End Header -->
		<h1>Coming Soon!</h1>
	</body>
</html>

＆＃13;

Answer 2

你的CSS中有一个额外的空间 - “comesoon”课程没有应用到你的范围内;

从

更改

button span .comingsoon

到

button span.comingsoon

将修复按钮对齐和字体大小错误。

Answer 3

您需要重置vertical-align值：

＆＃13;

a,

button {

  vertical-align: top;

  /* or any other value that suits you */

}

h1 {

  text-decoration: underline;

}

/* Common Header */

body {

  background-color: #d5d5d5;

}

.header button {

  background-color: #8C481B;

  text-align: center;

}

button {

  display: inline-block;

  border-radius: 15px;

  height: 50px;

  width: 125px;

  font-size: 20px;

}

button span .comingsoon {

  color: #eeeeee;

  font-size: 10px!important;

}

nav {

  text-align: center;

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
  <!-- Start Header -->
  <div class="header">
    <nav>
      <a href="index.html">
        <button type="button">Home</button>
      </a>
      <!--First Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <!--Second Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <a href="help.html">
        <button type="button">Help</button>
      </a>
    </nav>
  </div>
  <!-- End Header -->
  <h1>Coming Soon!</h1>
</body>

</html>

＆＃13;

Answer 4

您必须删除span和.comingsoon

之间的空白处

使用：button span.comingsoon

Answer 5

它们是错误对齐的，因为文本是多行的。

尝试设置较小的字体大小，或设置白色空间：nowrap样式以实现仅限一行的文字。

或者，您可以移除宽度，让按钮根据其中的文本有机地生长。

为什么按钮没有对齐？

5 个答案: