如何对齐文本和图像在一行和定位那些对左和/或右？ [英] How to align text and images on one line and position those to the left and/or right?

问题描述

我有以下的CSS和HTML code：

I have the following CSS and HTML code:

div.container { height: 40px; }
div.container .title {}
div.container .link_buttons {}


<div>
  <div class="container">
    <div class="title">
      <img width="16" height="16" src="/favicon.ico" alt="Text">

      <a href="http://www.test.com">Test website</a>
    </div>

    <div class="link_buttons">
      <a target="_blank" href="http://www.test.com">
        <img src="transparent.gif" class="background_image" alt="Text">
      </a>
    </div>
  </div>

  <!-- The same structure as the above but with different data. -->
  <div class="container">...</div>
  <div class="container">...</div>
</div>

我想在同一行对齐所有内容present每个 div.container ，其中的每个 div.container ，使 div.title 内容定位在左侧， div.link_buttons 内容被定位在右边。使这个，我想的垂直对齐的 div.title 和 div.link_buttons 的中的中间的的 div.container 。

I would like to align on the same line all the content present in each div.container and inside each div.container to make the div.title content to be positioned on the left and the div.link_buttons content to be positioned on the right. Made this, I would like to vertical align div.title and div.link_buttons in the middle of div.container.

我如何样式的CSS的正确方法？或者说，有我重新思考和改变整个HTML code所以把事情简单化？如果是的话，我可以为了得到相同的结果做什么呢？

How can I style the CSS the proper way? Or, have I to rethink and change the whole HTML code so to simplify things? If so, what I can make in order to have the same result?

注：我试图用浮动，但我有麻烦主要是因为那时我不能垂直对齐 div.title 和 DIV。 link_buttons 在 div.container （你可以在上面code看，它有高度：40PX ; ）

Note: I tried to use float, but I am in trouble mostly because then I can not vertical align the div.title and div.link_buttons inside the div.container (as you can see in the above code, it has height: 40px;).

推荐答案

在这里你去：

div.container { height: 40px; line-height:40px;}
div.container .title {float:left;}
div.container .link_buttons {float:right}

http://jsfiddle.net/WH4eK/

这篇关于如何对齐文本和图像在一行和定位那些对左和/或右？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！