Question

试图让每个梯形都以文字为中心 - 但不确定如何！

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边框fidgeting技术来获取梯形，但是当形状反转时我必须在使用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-height设置为您想要居中的项目的高度。

所以：

ul div {line-height:80px;}

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

2 个答案: