2015-10-04 51 views
1

我有以下的菜单栏:如何在使用flexbox时使用li元素垂直居中文本?

<ul> 
    <li><a>A</a></li> 
    <li><a>B</a></li> 
    <li><a>C</a></li> 
</ul> 

下面CSS:

ul { display: flex; flex-direction: row; height: 100%; } 
ul li { flex: 1, auto; text-align: center; } 
ul li a:hover { cursor: pointer; } 

我这样做,这样的填充左丽之间是相同的。但是现在很难将文本垂直居中。有什么建议吗?

我试图在li中添加行高:2。但我不认为这是解决方案。

谢谢。

+0

如果行高工作得很好,为什么不利用呢? –

+0

我编辑了我的答案,关于你的问题。你的'ul'是高度50px。你的'ul li'有line-height:50px。它将中心。请再次查看“运行代码片段”。 –

回答

0

你上面的CSS代码给了我一个完全不同于上面描述的路线。菜单碰到对方。你为什么不按如下方式使用display: block/inline-block

我添加了50px高度到ul和50px到ul li。为了保持菜单项不同,我添加了margin-left:2px;

ul { 
 
    display: block; 
 
    flex-direction: row; 
 
    height: 50px; 
 
} 
 
ul li { 
 
    border: 1px solid #CCC; 
 
    display: inline-block; 
 
    flex: 1, auto; 
 
    line-height: 50px; 
 
    margin-left: 2px; 
 
    text-align: center; 
 
} 
 
ul li a:hover { 
 
    cursor: pointer; 
 
}
<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

+0

如果'li'有高度,可以说'50px'。这不是一个解决方案 – Chris

0

你可以试试这个:

ul { 
    display: flex; 
    flex-direction: row; 
    height: 50px; 
} 
ul li { 
    flex: 1, auto; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 50px; 
    text-align: center; 
    list-style: none; 
    border: 1px solid lightblue; 
} 
ul li a:hover { 
    cursor: pointer; 
} 

DEMO FIDDLE

+0

没有运气。为什么显示:在flex-direction时阻挡:row? –

1

另一种解决方案是使用display: table-cell。试试下面的代码片段:

ul li { 
 
    height: 50px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    list-style: none; 
 
    border: 1px solid lightblue; 
 
} 
 
ul li a:hover { 
 
    cursor: pointer; 
 
}
<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

你可以尝试加入不同的高度,以测试它,如果你没有设置高度(因为你可能不知道),它会解决它将自动垂直对齐内容。

+0

没有。我不想使用固定高度50px。我正在使用百分比高度。如果我可以使用固定高度,那么答案对我来说太显而易见了。抱歉。 –

+0

好吧,让我解决问题 – Chris

+0

你现在试试吗? – Chris

0

如果修复 “UL” 的高度,你可以很容易地使 '礼' 应用这些CSS

ul { 
 
    position: relative; 
 
    display: block; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
ul li { 
 
    background-color:lightblue; 
 
    border: 1px solid #CCC; 
 
    display: inline-block; 
 
    text-align: center; 
 
    position:relative; 
 
    top: 50%; 
 
    -moz-transform: translatey(-50%); 
 
    -ms-transform: translatey(-50%); 
 
    -o-transform: translatey(-50%); 
 
    -webkit-transform: translatey(-50%); 
 
    transform: translatey(-50%); 
 
} 
 

 
ul li a:hover { 
 
    cursor: pointer; 
 
}
<ul> 
 
    <li><a>A</a></li> 
 
    <li><a>B</a></li> 
 
    <li><a>C</a></li> 
 
</ul>

1

试试这个垂直居中:

HTML(无变化)

<ul> 
    <li><a>A</a></li> 
    <li><a>B</a></li> 
    <li><a>C</a></li> 
</ul> 

CSS

html, body { height: 100%; } /* necessary if using percentage heights on child elements */ 

ul { 
    display: flex; /* establish flex container */ 
    flex-direction: column; 
    height: 100%; 
    padding: 0; /* for demo purposes */ 
    margin: 0; /* for demo purposes */ 
    background-color: #eaeaea; /* for demo purposes */ 
    border: 5px solid black; /* for demo purposes */ 
    font-size: 2em; /* for demo purposes */ 
} 

ul li { 
    flex: 1; /* distribute all available space evenly among flex items */ 
    margin: 10px; /* for demo purposes */ 
    border: 2px dashed red; /* for demo purposes */ 
    display: flex; /* make each flex item a flex container, as well */ 
    align-items: center; /* center text vertically (in this case) */ 
    justify-content: center; /* center text horizontally (in this case) */ 
} 

ul li a:hover { 
    cursor: pointer; 
    } 

DEMO:http://jsfiddle.net/vfa01j14/