Question

我想在红色DIV中水平和垂直对齐我的菜单项和徽标图片。我怎么能实现这一目标？我试图将左边距和右边距设置为自动以及垂直对齐到中心，但这并不起作用。谢谢你的帮助

enter image description here

HTML：

<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

CSS：

#nav-container {
    height: 300px;
    background: red;
}
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Answer 1

＆＃13;

#nav-container {
    height: 300px;
    background: red;
}
#navlist li {
    display: inline-block; /* this for personal preference :) */
    vertical-align: middle; /* this for alignment*/
    list-style-type: none;
    padding-right: 20px;
}

＆＃13;

<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

＆＃13;

Answer 2

将display:table/table-cell与vertical-align：

一起使用

＆＃13;

#nav-container {
    height: 300px;
    background: red;
    display:table;
    width:100%;
}
#nav-container nav{
    display: table-cell;
    height: 300px;
    vertical-align: middle;
    text-align:center;
}

#nav-container nav li{
    display:inline-block;
    vertical-align: middle;
}

＆＃13;

<div id="nav-container">
    <nav>
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a>
            </li>
            <li><a href="#">Item two</a>
            </li>
            <li><a href="#">Item three</a>
            </li>
            <li>
                <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg">
            </li>
            <li><a href="#">Item four</a>
            </li>
            <li><a href="#">Item five</a>
            </li>
        </ul>
    </nav>
</div>

＆＃13;

JSFiddle

Answer 3

为了实现这一点，你需要做三件事。

1）作为容器的主要div 2）容器内部的一个div，垂直高度，宽度为容器的100％，因为你必须进行相对定位才能进行垂直对齐。 3）最后一个容器，用于左边距，右边边距自动。它必须具有比前两个容器小的设定宽度 4）所有内容都位于水平div内 5）不要设置主容器的高度，因为这会限制垂直对齐超出该范围。

#nav-container {
    background: red;
    width: 100%
}

#vertical-align {
  position: relative;
  top: 50%;
    width:100%
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#horizontal-align{
 width: 100%
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
}

css垂直和水平对齐问题

3 个答案: