如何在导航栏中垂直对齐<p>标记

Question

对于我的导航栏，我希望将 p标记与我的 a标记

对齐

CSS就在这里

#welcome {
    vertical-align: center;
    /* align: middle; */
    color: white;
}

HTML就在这里

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li id="welcome">
      <p>Welcome</p>
    </li>
    <li><a id="home" href="/index.html">Home</a></li>
    <li><a id="logout" href="/logout.html">Log out</a></li>
  </ul>
</div>

但这就是它的样子：

那我该怎么做呢？

Answer 1

最简单的方法是为p标记提供与导航栏高度相同的line-height并删除其边距：

.navbar p {
    line-height:40px;
    margin:0;
}

vertical-align属性不会垂直对齐元素，尽管它看起来像。它仅适用于表格单元格和inline-block元素。此外，vertical-align: center;

没有vertical-align: middle;

Answer 2

你也可以这样做：

CREATE TABLE `hoursofservice` (
    `Task_ID` MEDIUMINT(8) UNSIGNED NOT NULL AUTO_INCREMENT,
    `User_ID` SMALLINT(5) UNSIGNED NOT NULL,
    `Location` VARCHAR(20) NULL DEFAULT NULL,
    `Task` VARCHAR(30) NULL DEFAULT NULL,
    `Start_DT` DATETIME NOT NULL,
    `End_DT` DATETIME NULL DEFAULT NULL,
    `Comment_1` VARCHAR(20) NULL DEFAULT NULL,
    `Comment_2` VARCHAR(256) NULL DEFAULT NULL,
    `Bad_Data` BIT(1) NOT NULL DEFAULT b'0',
    PRIMARY KEY (`Task_ID`),
    UNIQUE INDEX `Task_ID` (`Task_ID`),
    INDEX `FK_hoursofservice_employee_id` (`User_ID`),
    CONSTRAINT `FK_hoursofservice_employee_id` FOREIGN KEY (`User_ID`) REFERENCES `employee_id` (`User_ID`) ON UPDATE CASCADE

DEMO

Answer 3

INSERT INTO hoursofservice (User_ID, Location, Task, Start_DT, End_DT, Comment_1, Comment_2) SELECT User_ID, Location, Task, Start_DT, End_DT, Comment_1, Comment_2 FROM read_text_file; 属性告诉<div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a id="welcome">Welcome</a></li> <li><a id="home" href="/index.html">Home</a></li> <li><a id="logout" href="/logout.html">Log out</a></li> </ul> </div> 元素如何与其vertical-align兄弟姐妹对齐。

因此，您可以使用以下代码解决问题：

inline-block