On 6/17/13 9:25 AM, Tom Livingston wrote:
Given this structure:
<div class="sidebar">
<a href="" class="grey-button icon-info">Infographics</a>
<a href="" class="grey-button icon-calc">Tax Credit Calculator</a>
<a href="" class="grey-button icon-faq">Frequently Asked Questions</a>
</div>
I have the hrefs set to display:table-cell; so as to use
vertical-align:middle; but they are appearing next to each other in
the browser. I understand why and expect this, but what would be the
proper way to get them each on their own line? Wrap them each in a P
for example, or is there a way to do it within the CSS?
Working in the dark here, as I'm not entirely sure what you are trying to do.
An alternative way of "vertically aligning" a single line of text is to
increase the line height. Here's some code that I use, albeit in a set of list
items, as has been suggested. It should work for your situation, too, I hope.
Just change the line height to your liking:
.sidebar a {
display: block;
border: solid transparent;
border-width: thin 0;
padding: 0 20px;
padding: 0 1.25rem;
font-size: inherit;
font-weight: inherit;
line-height: 2;
text-decoration: none;
color: inherit;
white-space: nowrap;
}
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
