CSS箭頭垂直居中於div的右側

Question

就像標題所說的那樣，我試圖將CSS三角形/箭頭垂直居中到div的右側，當然，我希望使用純CSS解決方案來做到這一點。

我本來可以包含圖片，但是由於我的代表不高，所以不能。

注意：我目前的程式碼無法正常運作，而且不兼容跨瀏覽器（例如Chrome將箭頭放在右上角〜但在Firefox上，它被壓扁了）

我的密碼

HTML ：

<div class="main-panel">
    <nav class="left-panel">
        <ul class="page-nav">
            <li class="page-tab active"><a class="page-nav-link">Dashboard</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 1</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 2</a></li>
            <li class="page-tab"><a class="page-nav-link">Page 3</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abc</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdef</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghi</a></li>
            <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghijkl</a></li>
            <li class="page-tab"><a class="page-nav-link">Very long element abcdefghijklmno</a></li>
        </ul>
    </nav>
    <div class="right-panel">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque nisl vitae nulla dignissim, at rutrum nunc interdum. Mauris et facilisis orci. Phasellus ac libero id nisl malesuada ultricies. Aenean vitae cursus velit. Nulla sit amet leo eu enim scelerisque volutpat. Vivamus gravida felis et pulvinar mollis. Sed bibendum consectetur nisi, sit amet tincidunt enim interdum a. Duis sed gravida felis. Fusce mauris est, bibendum a neque et, fringilla placerat magna. Vestibulum pellentesque massa quis bibendum dapibus. Praesent pharetra ipsum id libero dapibus rutrum. Quisque accumsan dictum lacinia.
            Mauris ut mi nec orci accumsan consequat. Donec blandit augue eget nulla fermentum, quis porttitor lacus feugiat. Proin vehicula dolor id lorem egestas elementum. Nullam vitae rutrum tortor. Proin varius adipiscing nibh. Vivamus ultrices nibh nec varius bibendum. Integer quis nisi sed metus adipiscing sagittis. Curabitur congue, nisi nec pretium suscipit, mi leo posuere dui, pellentesque dapibus ligula urna a ligula. Quisque mauris nisl, interdum eu est in, elementum cursus arcu. Sed suscipit vel erat vitae viverra. Mauris neque ipsum, bibendum eget hendrerit ac, vulputate in eros. Ut tincidunt, urna ac auctor porttitor, mauris purus varius erat, ut pellentesque urna turpis non nibh. Aenean sed neque a velit tristique tristique.
            Praesent id cursus libero. Vestibulum pulvinar feugiat neque pretium suscipit. Nam vitae magna eget elit aliquam accumsan. Duis et eleifend enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nunc est, commodo quis pretium vitae, lacinia ac lectus. Cras mi tellus, suscipit non leo eget, auctor feugiat mauris. Praesent vitae vehicula ipsum, nec ultrices arcu. Proin mollis leo sit amet erat scelerisque feugiat. Nullam eget varius ante. Praesent a laoreet libero.
            Suspendisse ut eros et odio rhoncus malesuada. Integer laoreet, leo at fringilla volutpat, augue lorem tincidunt augue, sit amet feugiat erat neque in est. Phasellus imperdiet, nisi vel faucibus auctor, sapien orci mollis est, tincidunt vehicula nisi nunc sit amet purus. Sed cursus ipsum nisi, id elementum leo feugiat in. Phasellus vitae arcu ac ligula pellentesque malesuada. Maecenas vulputate nunc et consequat pellentesque. Nulla semper quam a orci eleifend, vel gravida est euismod. Nam fermentum, nisi ullamcorper congue convallis, turpis purus lacinia ligula, ac posuere urna est non felis. Cras lobortis ligula neque, vel fermentum magna facilisis sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Quisque a quam nec sem vestibulum dapibus quis non lacus. Integer eget ligula eu turpis pretium iaculis. Cras gravida ligula in mauris bibendum placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac tristique risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque diam nisi, sodales vel nisi a, sollicitudin commodo ipsum. Fusce elementum nisi ac semper dignissim. Etiam nec felis dapibus lacus faucibus vehicula eget eu odio. Sed id risus tellus. Curabitur in luctus orci.
        </p>
    </div>
</div>

CSS ：

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    line-height: 20px;
}

.main-panel {
    min-width: 700px;
    width: 100%;
    min-height: 500px;
    max-height: 700px;
    display: -webkit-flex;
    display: flex;
    background: rgba(64, 64, 64, 0.4);
}

.left-panel {
    border-width: 2px 0 0 0 0;
    background: rgba(245, 245, 245, 0.4); /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For Chrome and Safari */
    background:    -moz-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /*     For old Fx (3.6 to 15) */
    background:     -ms-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For pre-releases of IE 10*/
    background:      -o-linear-gradient(top, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* For old Opera (11.1 to 12.0) */ 
    background:         linear-gradient(to center bottom, rgba(245, 245, 245, 0.4), rgba(221, 221, 221, 0.4)); /* Standard syntax; must be last */
    box-shadow:         0px 0px 7px white inset;
    -moz-box-shadow:    0px 0px 7px white inset;
    -webkit-box-shadow: 0px 0px 7px white inset;

    overflow: hidden;
    min-width: 180px;
    max-width: 280px;
    padding: 5px 0 5px 7px;
}

.right-panel {
    background-color: white;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
    -webkit-flex: 1;
    flex: 1;
    flex-basis: auto;
}

.left-panel > .page-nav > .page-tab {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: solid 1px rgba(245, 245, 245, 0.4);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3) inset;
    border-top-width: 1px;
    border-right-width: 0;
    padding: 0 5px;
    margin-bottom: 0px;
    cursor: pointer;
    height: 25px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    list-style: none;
    text-align: center;
}

.left-panel > .page-nav > .page-tab.active {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
    background: rgba(245, 245, 245, 0.4); /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For Chrome and Safari */
    background:    -moz-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /*   For old Fx (3.6 to 15) */
    background:     -ms-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For pre-releases of IE 10*/
    background:      -o-linear-gradient(top, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* For old Opera (11.1 to 12.0) */ 
    background:         linear-gradient(to center bottom, rgba(68, 68, 68, 0.4), rgba(59, 59, 59, 0.4)); /* Standard syntax; must be last */
}

.left-panel > .page-nav > .page-tab.active:after {
    content: " ";
    height: 0;
    width: 0;

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; 
    border-right: 7px solid white;
    margin-right: -5px;
    display: inline-block;
    float: right;
}

.left-panel > .page-nav > .page-tab:hover {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
}

JSFiddle鏈接： http : //jsfiddle.net/LvG2C/

Answer 1

嘗試這樣：

.left-panel > .page-nav > .page-tab {
    position: relative;
}

.left-panel > .page-nav > .page-tab.active:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #ffffff transparent transparent;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
    content: "";
}

高度三角形14px，用於垂直對齊：14/2 = 7，對於該頁邊距頂部：-7px；

例

順便說一下， 發電機三角形

Answer 2

使用行高值+字體大小來設置箭頭和邊距的大小，以保持浮動 。 http://jsfiddle.net/LvG2C/3/

編輯：如果將<a>設為一個內聯塊，則以下內容與文本省略號不兼容 。

您使用浮點數。 它與垂直對齊不兼容。

您也可以設置為inline-box和箭頭，使它們相互垂直對齊。 將寬度完全按一下箭頭： http : //jsfiddle.net/LvG2C/1/

.left-panel > .page-nav > .page-tab.active:after {
    content:" ";
    height: 0;
    width: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid white;
    vertical-align:middle;
    display: inline-block;
}
.left-panel > .page-nav > .page-tab:hover {
    box-shadow: 2px 2px 2px rgba(245, 245, 245, 0.6) inset;
}
a {
    display:inline-block;
    width:100%;
    vertical-align:middle;
    margin-right:-3px;
}

Answer 3

一種替代方法是在您希望左側的箭頭垂直居中的元素上設置一個類。 在課堂上看起來像：

.left-arrow {
    background: url('/images/arrow.png') 0% 50% no-repeat;
    padding-left: 20px; // Number of pixels you need to offset the content to make the content come after the arrow the way you want it to.
}

這意味着任何具有class =“ left-arrow”屬性的元素都將在左側垂直居中放置一個箭頭。 那么導航代碼將如下所示：

<nav class="left-panel">
    <ul class="page-nav">
        <li class="page-tab active"><a class="page-nav-link">Dashboard</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 1</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 2</a></li>
        <li class="page-tab"><a class="page-nav-link">Page 3</a></li>
        <li class="page-tab"><a class="page-nav-link left-arrow">Somewhat long</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abc</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdef</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghi</a></li>
        <li class="page-tab"><a class="page-nav-link">Somewhat long abcdefghijkl</a></li>
        <li class="page-tab"><a class="page-nav-link">Very long element abcdefghijklmno</a></li>
    </ul>
</nav>

Answer 4

在那里很好地使用CSS3。 如果您的客戶對使用cSS3沒問題，那么您的方法就足夠了（如果那不是最好的選擇）。 但是，我為需要使用舊版瀏覽器的客戶端工作，事實上，我的工作仍在積極使用IE7 / 8。

這是我將用於簡單箭頭樣式解決方案的方法。 它簡單，健壯並與IE5 +兼容。 此外，此方法在移動設備和平板電腦瀏覽器上可以很好地工作。 （了解您的客戶/客戶的需求，並決定是否要使用此方法）。

1. 在photoshop中創建箭頭，並將其另存為.png。 該文件只能是50bytes或太小了。 （5像素X 10像素）。

2. 同樣在photoshop中創建漸變。 它應該是（1px寬），並且高度應該恰好是li元素的兩倍。 在圖像上創建正常/懸停狀態。 因此，前y個像素應為法線漸變，接下來的y個像素應懸停在漸變上方。 我們將使用CSS更改背景的位置。 沒有理由創建2個漸變圖像。

3. 部署CSS2。

   li {background：url（gradient.png）repeat-x; 高度：30px； 行高：30px; 文本對齊：居中； 顏色：＃000; font-size：14px; } li：hover {background-position：0 -30px; } li a {背景：url（arrow.png）不重復100％居中； }

這應該使您入門。 並向您展示替代方法。

SO正在出錯，無法將代碼轉換為代碼塊進行格式化