在 div 中对齐标题元素（文本/徽标/导航）

Question

好的，所以我承认在这方面是全新的。我首先是一名设计师，并试图通过拆解预先构建的模板并研究它们来学习如何编码。

我想要做的是 - 有一小行文本（左浮动）、一个居中的徽标（其宽度/高度可能在最终确定时有所不同）和一个文本导航（右浮动）。我正在修改一个主题。

这是我所拥有的：

 <header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">

    <div class="header_top clearfix">
        <div id="logo" class="left_float">
            <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>  
        </div>

        <?php  if(function_exists('wp_nav_menu')) : ?>  
            <?php 

            wp_nav_menu(  
                array(  
                    'theme_location'  => 'primary-menu', 
                    'container'       => 'nav',                     
                    'container_id'    => 'nav',  
                    'container_class' => 'right_float',  
                    'menu_class'      => '', 
                    'menu_id'         => '' ,
                    'walker' => new custom_menu_output()
                ));  
            ?>  
        <?php else: ?>  
            <nav id="nav" class="right_float">  
                <ul>  
                    <?php wp_list_pages('title_li=&depth=0'); ?>  
                </ul>  
            </nav>  
        <?php endif; ?> 

    </div>

下面是 CSS。我尝试将 .left_float 与 .center 类互换作为测试，但它最终将导航向下推。

.left_float { 
    float: left; 
    }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto }


 .right_float { 
     float: right; 
     }

长帖 - 抱歉！任何帮助将不胜感激 - 甚至是一些我可以阅读和学习并自行开始的链接。

非常感谢！

Answer 1

第 1 部分： 首先，您的代码中没有 <div> 类 center。首先将left_float 和right_float <div> 标签之间的所有代码放入它自己的<div class="center">...</div> 标签中。我假设你想要这样的东西：

<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">

    <div class="header_top clearfix">
        <div id="logo" class="left_float">
            <a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>  
        </div>
        <div class="center">
        <?php  if(function_exists('wp_nav_menu')) : ?>  
            <?php 

            wp_nav_menu(  
                array(  
                    'theme_location'  => 'primary-menu', 
                    'container'       => 'nav',                     
                    'container_id'    => 'nav',  
                    'container_class' => 'right_float',  
                    'menu_class'      => '', 
                    'menu_id'         => '' ,
                    'walker' => new custom_menu_output()
                ));  
            ?>  
        <?php else: ?>
        </div>
            <nav id="nav" class="right_float">  
                <ul>  
                    <?php wp_list_pages('title_li=&depth=0'); ?>  
                </ul>  
            </nav>  
        <?php endif; ?> 

    </div>
    <br clear="all" />

您会注意到我添加了<div class="center">...</div> 并添加了<br clear="all" />（这对于下一部分很重要......）

第 2 部分：将您的 CSS 更改为：

.left_float, .center, .right_float { 
    float: left; 
}

但请确保在代码中保留新的<br clear="all" />！最后，您可以将所有divs 浮动到左侧，它们都将彼此相邻。从那里，您可以将每个 divs 的宽度修改为您想要的任何值！

嗯，希望对你有帮助，
希望4你

Answer 2

您的 wp_nav_menu 没有任何 div。 Enclose 带有一个 div 并在所有三个 divs 中添加一个类 class=lfloat。

`.lfloat{
float: left;
}`