Css 在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>

        <?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>

长传-对不起！任何帮助都将不胜感激，即使是一些我可以阅读、学习并自己开始的链接

非常感谢

第1部分：首先，代码中没有带类中心的代码。首先，将位于左浮点和右浮点标记之间的所有代码放入自己的。。。标签我假设你想要这样的东西：

<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浮动到左侧，它们将彼此相邻。从那里，您可以根据自己的喜好修改每个div的宽度

嗯，我希望这会有帮助， 希望您的wp_nav_菜单没有任何div。include包含一个div，只向所有三个div添加一个class=lfloat

---

HTML5不再支持该属性。我强烈建议你停止使用它。这里写的解决方案似乎没有任何标签。但是，它们是不推荐使用的，应该避免使用。不，这不使用。我从未使用过：

<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" />

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

`.lfloat{
float: left;
}`