How to align two anchor tags with text horizontally next to each other?

问题

I'm working on a website, i need to put anchortag with text side by side. I tried, but i get the two images first and then the two text horizontally.

html:

<div id="section">
    <ul>
        <li>
            <a class="bt btleft" href="#"><img  src="jqe13/image/web.png" 
            id="photoSelect" />web</a>
           <a class="bt btleft" href="#"><img title="Facebook"  src="jqe13/image
   /Facebook1.png" />Download</a>

        </li>
    </ul>
</div>

css:

  #section {
  width: 82%;
   margin: 15px auto 0 auto;
    padding: 2%;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    }

how can i get the image and text side by side?

回答1:

try this one

  #section {
  width: 82%;
   margin: 15px auto 0 auto;
    padding: 2%;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    display:table;
    }
#section ul li
{
    display:table-cell;
}
#section ul li a
{
    vertical-align:middle;
    text-align:center;
}
#section ul li a img
{
    vertical-align:middle;
    text-align:center;
}

http://jsfiddle.net/g8ZbM/3/

回答2:

Not 100% sure what the problem is as from what I can see it looks fine. But you could just split the links up. Your using a list but not slpitting the items up.

HTML:

<div id="section">
    <ul>
        <li> <a class="bt btleft" href="#"><img  src="jqe13/image/web.png" 
            id="photoSelect" />web</a>

        </li>
        <li> <a class="bt btleft" href="#"><img title="Facebook"  src="jqe13/image
   /Facebook1.png" />Download</a>

        </li>
    </ul>
</div>

CSS:

  #section {
      width: 82%;
      margin: 15px auto 0 auto;
      padding: 2%;
      border-radius: 12px;
      border: 1px solid #e0e0e0;
  }
  #section li {
      display: inline;
    margin: 10px;
  }

DEMO HERE

So we can split them by putting them in separate <li> tags and then align them using display: inline. This makes them in a row instead of doing downwards.

来源：https://stackoverflow.com/questions/21326637/how-to-align-two-anchor-tags-with-text-horizontally-next-to-each-other

标签

html

css

anchor