居中水平对齐的标题

Posted 2023-03-29

【中文标题】居中水平对齐的标题

【英文标题】：Centering A Horizontal Aligned Header

【发布时间】：2014-05-27 23:37:11

【问题描述】：

我有三个 div 我想在页面标题中水平居中，如下所示：

（导航标志导航）

html:

<header class="header">
  <nav class="nav">
    <ul class="navleft">
        <li class="navleft-item">Item</li>
        <li class="navleft-item">Item</li>
    </ul>
    <div class="logo">
        <img src="img/logo.png" /> 
    </div>
    <ul class="navright">
        <li class="navright-item">Item</li>
        <li class="navright-item">Item</li>
    </ul>
  </nav>
</header>

css:

.nav 


.logo 


.navleft 


.navright 


.navleft-item 
display: inline;


.navright-item 
display: inline;

CSS 是裸露的，因为我完全因为沮丧而删除了一半。

向左浮动所有 div 不起作用，当我使用显示内联块时，我无法向上移动 navleft 和 navright 以使其与徽标对齐。目前我不知道。

【问题讨论】：

请分享您的css 或创建一个jsfiddle。谢谢。

我添加了CSS，尽管没有太多。

【参考方案1】：

您可以使用text-align: center 和display: inline-block

Fiddle

或

你可以使用display: table + table-cell

Fiddle

.nav     
    text-align: center;

.logo 
    display: inline-block;

.navleft 
     display: inline-block;

.navright 
     display: inline-block;

.navleft-item 
    display: inline-block;

.navright-item 
    display: inline-block;

【讨论】：

它可以工作，但我无法将 navleft 和 navright 向上移动以与徽标的中心对齐。导航保持锁定在徽标的底部，甚至 vertical-align:middle 也不起作用。 @JunM

@user3232801 - 请查看更新的答案或此链接 - jsfiddle.net/YLFPL/1

【参考方案2】：

这个怎么样：

<style type="text/css">
.navleft float: left;
.navright float: right;
.logo text-align: center;
</style>