CODEWITHSUNDEEP
htmlcss
Ivan
Ivan

Reputation: 15932

How to center large text with image?

I have a sidebar that displays an icon and some text aligned. This sidebar is resizable and sometimes text and icon don't fit in the same line.

This jsfiddle shows an example. Blue button shows how it looks like when the line fits and orange button shows what happens when the text is too long.

My goal is to make it look like this when the line is too long:

enter image description here

It is text should stay at rigth side of the image vertically centered with it. No problem if I have to change HTML.

Upvotes: 0

Views: 130

Answers (3)

Burntime
Burntime

Reputation: 2344

Try this way: 

ul li {
    cursor: pointer;
    padding-left: 70px;

ul span {
    vertical-align: middle;
    display: inline-block;
}

ul img {
    vertical-align: middle;
     margin: 0 0 0 -70px;
}

http://jsbin.com/ogofun/5/edit#html,live

Upvotes: 2

sandeep
sandeep

Reputation: 92813

@Ivan; you can write like this http://jsfiddle.net/sandeep/UEk5b/15/

a, a:visited {
    color: blue;
    text-decoration: none;
    display:table;
}
ul li a span {
    display: inline-block;
    width:102px;
    vertical-align: middle;
}

display:table is not work in IE7 & below.

Edit

check this without display:table http://jsfiddle.net/sandeep/UEk5b/19/

Upvotes: 4

HoverHell
HoverHell

Reputation: 4889

What you need is exactly described by html table elements:

<div id="resizable">
  <ul>
    <li>
      <a href="#" class="ajax-page">
        <table><tr><td valign="middle">
          <img src="http://bit.ly/mRkUDB" alt="" width="60px" height="60px"/>
        </td><td valign="middle">
          <span>This is a test</span>
        </td></tr></table>
      </a>
    </li>
    <li>
      <a href="#" class="ajax-page">
        <table><tr><td valign="middle">
        <img src="http://bit.ly/o7Elfp" alt="" width="60px" height="60px"/>
        </td><td valign="middle">
        <span>This is another larger test</span>
        </td></tr></table>
      </a>
    </li>
  </ul>
</div>

although you still might want different representation with different CSS styles or at low widths, in which case using tables might be a bad idea.

Upvotes: -1

Related Questions