在同一个基础行中将图像和导航一起居中？

Question

我目前正在构建一个新站点，并决定这次使用基础，因此它从一开始就响应而不是简单的骨头编码，但是在将图像和导航集中在一起时遇到了一些问题一排。他们坐在同一排，只是不是 'equally'.

HTML:

        <div id="navigation">
            <div class="row fullWidth">
                <div class="large-12 columns">
                        <div id="logo">
                            <img src="logo.png" alt="Logo" />
                        </div>
                        <?php
                            wp_nav_menu( array('main-menu' => 'Main Menu'));
                        ?>
                </div>
            </div>
        </div>

CSS:

#navigation {
    margin: 0 auto;
}

#navigation li {
    display: inline;
    padding: 0px 10px;
    margin: 0px 10px;
}

#navigation ul {
    float: right;
}

任何帮助将不胜感激，我想这很简单，但通常没有基础，你只需要将边距设置为 0 auto 就可以了。

Answer 1

要使它们在同一行居中，您可以在每个元素上使用 display: table-cell; 并使用 vertical-align: middle; 将它们垂直居中。像这样：

#navigation {
    margin: 0 auto;
    overflow: hidden;
}

#navigation #logo {  display: table-cell; vertical-align: middle; }

#navigation li {
    display: inline;
    padding: 0px 10px;
    margin: 0px 10px;
}

#navigation ul {
  display: table-cell; vertical-align: middle; 
}

.columns { display: table; width: 100%; }

Updated fiddle

在同一个基础行中将图像和导航一起居中？

Centering an image and navigation together in the same foundation row?

html

css

zurb-foundation