Hacer migas de pan ... no tan fácil como literalmente hacer migas de pan, ¿cómo puedo hacer que el texto esté adentro?

Question

Así que hice algunas migas de pan a través del código de

http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css

... y obtuve todo a la forma en que me gusta, solo por la vida de mí, no puedo entender cómo obtener el texto dentro de los cuadros ... El problema es que existen por separado, puedo usar la línea -Height para empujar el texto por la página aún más, sin embargo, no puedo usar un número negativo para empujar el texto hacia arriba ... lo mismo ocurre con el margen-top ...

EDITAR: Sé que el código de Link25 funciona bien para que el texto esté dentro, es porque encogí los contenedores que tengo este problema ...

¿Algunas ideas?

Aquí está el HTML (StackOverflow sigue traduciendo):

Y el CSS:

body {
margin: 0px;
font-family: 'Roboto';
background: #eeeeee; }

Crumbs {Text-Align: Center; }

#crumbs ul {
    list-style:none;
    display: inline-table;

}

    #crumbs ul li { display: inline-block; }

        #crumbs ul li a {    /* The block part of each breadcrumb; the text in each breadcrumb */
            display: block;
            float: left;
            height: 0px;
            background: #327098;
            /*text-align: center; */
            padding: 30px 10px 0 80px;  /* size of each breadcrumb  */
            position: relative;
            margin: 0 5px 0 0;
            font-size: 16px;
            text-decoration: none;
            color: #000000; }

            #crumbs ul li a:after { /* The triangle to the right of each breadcrumb */
                content: "";
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #327098;
                position: absolute;
                right: -15px;
                top: 0;
                z-index: 1; }

            #crumbs ul li a:before {    /* the triangle to the left of each breadcrumb  */
                content: "";
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #eeeeee;
                position: absolute;
                left: 0;
                top: 0; }

        #crumbs ul li:first-child a {    /* what makes the first breadcrumb have a rounded left side */
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px; }

            #crumbs ul li:first-child a:before { display: none; }

        #crumbs ul li:last-child a {
            padding-right: 80px;    /* the width of the last breadcrumb */
            border-top-right-radius: 10px;  /* Makes the right side of the last breadcrumb rounded */
            border-bottom-right-radius: 10px; } /* rounded */

            #crumbs ul li:last-child a:after { display: none; }

        #crumbs ul li a:hover { background: #c9c9c9; }   /* a hover color for breadcrumbs, exclu. triangle-right    */

            #crumbs ul li a:hover:after { border-left-color: #c9c9c9; } /* a hover color for triangle-right */

Answer 1

http://jsfiddle.net/zh6bw/1/

Es causado por sus anclajes que tienen un relleno superior igual a la altura que desea que tengan las migajas. Quité ese relleno, dio el elemento de la lista que contiene height:30px;, dio los anclajes line-height:30px; Entonces permanecen centrados verticalmente.

#crumbs ul li { 
    display: inline-block; 
    height:30px;
}

#crumbs ul li a {    /* The block part of each breadcrumb; the text in each breadcrumb */
    display: block;
    line-height:30px;
    background: #327098;
    /*text-align: center; */
    padding: 0 10px 0 80px;  /* size of each breadcrumb  */
    position: relative;
    margin: 0 5px 0 0;
    font-size: 16px;
    text-decoration: none;
    color: #000000;
}

Editar

No estoy seguro de a qué te refieres con ellos existentes por separado. Acabo de copiar el código que proporcionó en un violín y lo ejecuté. Y vi el problema aparente e hice lo que pude. Aquí está el problema que vi. http://jsfiddle.net/zh6bw/