Move up character displayed inline

css layout positioning
takeshin picture takeshin · Feb 2, 2011 · Viewed 33.9k times · Source

I have the following markup for breadcrumbs menu:

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

Is there a smart way to move those › (.raquo) characters a few pixels up without absolute positioning when all of the elements are displayed inline? I want this character to be smaller than the others and to be displayed in the center of the line (or some pixels down/up).

(I need it to work also for IE6 and up)

Answer

sashn picture sashn · Jul 25, 2013 
.raquo {
    position:relative;
    top:-2px;
}

worked best for me

Related questions

How do I center an SVG in a div?

I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it …

Read More
Positioning div elements horizontally, not vertically

Im designing a navigation bar; and tab links in it are made by CSS shapes. For this I use alot of position: absolute on child elements, and I have parent containers set to position: relative. I also set a hard …

Read More
Vertical layout with CSS without using breaking elements?

Is it possible to implement vertical layout with CSS only, and not with HTML elements? I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, …

Read More