vertical-alignment

Using material icons with CSS, I have the following code that renders a link with icon and text. <a href="#"><i class="material-icons">group_work</i>Groups</a> As you can see in the image below, the text seems to be sinking down.. I would like them to be vertically aligned center together. How can i achieve this? PS. (Not a designer!) To vertically center elements, you can use the vertical-algin: middle; rule. In your case, that would most propably be: .material-icons { vertical-align: middle; } Here is an example with your dark button: .material-icons { vertical-align: middle; margin-right:

I'm trying to create some buttons for a website using styled hyperlinks. I have managed to get the button looking how I want, bar one slight issue. I can't get the text ('Link' in the source code below) to vertically center. Unfortunately there may be more than one line of text as demonstrated with the second button so I can't use line-height to vertically center it. My initial solution was to use display: table-cell; rather than inline-block , and that sorts the issue in Chrome, Firefox and Safari but not in Internet Explorer so I'm thinking I need to stick to inline-block. How would I go

I´m trying to align an image and a text vertically: +-------------------------+ -- Viewport | Text text text | | +-----+ text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text | +-------------------------+ This works fine, if the text is not wrapped. If the Text is wider than the viewport-width, it does not work anymore. I think this is caused by setting display: inline-block: <a href="#"> <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" /> <span style="display: inline-block; vertical-align: middle;">

How do I verically center the content of floating div (which height I don't know)? There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/ ) <div class="floating"> This should be in the middle </div> ​ .floating { height: 100px; float: left; border: 1px solid red; vertical-align: middle; } ​ How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid

I'm building a one-page site with a fixed-positioned navigation bar which scrolls smoothly to the different section elements through anchor links. The default behaviour for scrolling to an element is to align it to the top of the browser window. Instead, I want to align the element to the middle of the screen. I use this markup for navigation: <nav class="main-nav"> <a href="#top">Top</a> <a href="#section-1">Section 1</a> <a href="#section-2">Section 2</a> <a href="#section-3">Section 3</a> <a href="#section-4">Section 4</a> <a href="#section-5">Section 5</a> </nav> I use kswedberg's jQuery