html - 在使用未排序列表的梯形 div 中居中文本

Question

试图让每个梯形的文本居中 - 但不知道如何！

http://jsfiddle.net/fYkq4/

HTML结构如下：

<ul id="menu">
    <ul><div class="fade-div" id="trapezium1"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium2"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium3"> HOME </div></ul>
    <ul><div class="fade-div" id="trapezium4"> HOME </div></ul>
    <ul></ul>
</ul>

我使用CSS边框烦躁技术来获得梯形，但是随着形状倒置，我必须在使用border-bottom: 80px solid blue;和之间进行更改border-top: 80px solid blue;-即，如果我使用顶部，则文本在陷阱下方，如果我使用底部，则文本在内部（但实际上在下方） 陷阱。

我怎样才能使所有的HOME' 始终在每个梯形内？我是否需要将文本移出 div 并使 div 浮动？或者将文本放入另一个 div 并使其浮动？

Answer 1

你可以这样做：

http://jsfiddle.net/xonium/PqXbu/

重要的部分是拦截器

<div id="menu">
    <ul>
      <li class="fade-div" id="trapezium1"> HOME1 </li>
      <li class="fade-div" id="trapezium2"> HOME2 </li>
      <li class="fade-div" id="trapezium3"> HOME3       
        <div class="blocker"></div>
      </li>
      <li class="fade-div" id="trapezium4"> HOME4 
        <div class="blocker"></div>
      </li>
    </ul>  
</div>

它就像你的上面两个梯形一样，只是颜色相反。

.blocker {
  background-color: blue;
  height: 0;
  width:0;
  right:0;
  border-bottom: 80px solid red;
  border-left: 40px solid transparent;
  border-right: 0px solid transparent;
  float: right;
}

Answer 2

您可以将line-heightequal 设置为要居中的项目的高度。

所以：

ul div {line-height:80px;}