Question

您好我正在创建一个带有1000px的html菜单，其中包含2个图像，一个位于左侧，另一个位于菜单右侧，高度为40px，左侧还有一组链接，搜索表单位于像这样的权利：

<div class="menu">
    <div align="left">
        <img src="/img/menu_left.jpg"/>
        <a href="">link 1</a> | 
        <a href="">link 2</a> | 
        <a href="">link 3</a>
    </div>
    <div align="right">
        <form>
            <input type="text"/>
            <select>
                <option>opt1</option>
                <option>opt2</option>
            </select>
        </form>
        <img src="/img/menu_right.jpg"/>
    </div>
</div>

我正在尝试使用css而不是表来水平和垂直对齐所有内容。但我的css永远不会做我想要的:(

.menu {
    width:1000px;
    background-image:url('/img/menu_middle.jpg');
    background-repeat:repeat-x;
    background-color:#bf2b27;
    height:40px;
    vertical-align:middle;
    font-family: sans-serif, Verdana, Arial, Helvetica;
    font-size: 12pt;
    color:#ffffff;
    display:inline;
    float:left;
}

菜单有1000像素，背景图片工作正常，链接显示在底部不在中间，表单在右边但是一行向下，右边的菜单图像在表单后面再下一行。 / p>

请帮忙

Answer 1

这是正确的版本：http://jsfiddle.net/534J7/

不要使用align属性。它已被弃用。
使用浮动对齐。
垂直对齐的技巧是设置line-height: = container_height *。您还可以使用边距（例如图像）。

*而不是“container_height”，写下实际高度。

Answer 2

更干净的DOM尽管使用了img src，你仍然可以在左边div中使用带有填充的background-image。

CSS将2图像与链接和表单对齐

2 个答案: