Html 如何对齐div中的文本

我正在尝试显示4张带有标题、说明和删除链接的图片。我无法在我的框中获得指向右浮动的链接

这是html

<div id="container">
  <div class="image-wrapper">
    <div id="image-container">
     <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
     <span class="img-info">Title:</span>
     <span class="img-info">Description:</span>
      <span class="img-info alignright"><a href="#">Delete</a></span>
 </div>
    </div>
  </div><!--end container --> 

---

图片框的html会再重复3次。如何使第三个跨度连杆浮动到左侧？任何帮助都会很好

使用

文本对齐：

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

float

更适用于希望图像向右移动，并希望文本围绕图像流动等情况。由于它还会导致其他布局问题，您不妨尝试使用

text align

---

尝试这一快速解决方案，但是，您可能需要修改宽度等：

演示：

---

首先，在提供的代码中，您在哪里使用

.alignleft

其次，

.alignright

span有两类：

img info

和

alignright

。对于

img信息

，您有

显示块

。这是多余的，因为

float

属性将使元素

显示块

您只需将

overflow:hidden

添加到主div（图像容器）中即可。应用于链接的浮动使其看起来好像不在同一“层”中。添加

溢出隐藏

将解决此问题。Jsfiddle-

---

添加页边页眉：-29px；我们应该做到这一点

演示

HTML:

---

@Irfan的意思是复制你的代码，复制和粘贴两个东西有多困难，哈哈？你确定这没有使文本对齐吗？“对我来说，这是正确的吗？”霍林说，这是正确的。但它并不是真的在盒子里。这就是我想要达到的效果。我喜欢你的答案。这对我有用。这太完美了。非常感谢。感谢您的输入

floatleft

正在我没有显示的代码中使用。我很抱歉我太懒了，没有把代码拿出来@霍林的想法就是我想要达到的样子。非常感谢。没问题，很高兴你找到了解决办法。快乐编码：-）我实际上遇到了这样的问题。我用了你的答案，效果很好。作为提醒，你可以将两个答案混合在一起，然后添加

页边空白顶部：*像素负数*

除了

overflow:hidden

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

<div id="container">
  <div class="image-wrapper">
    <div id="image-container">
     <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
         <div class="info-container">
         <div class="alignleft">
     <span class="img-info">Title:</span>
     <span class="img-info">Description:</span>
             </div>
      <span class="img-info alignright"><a href="#">Delete</a>
             </span>
 </div>
         </div>
    </div>
  </div><!--end container --> 

 #container {
   width: 50%;
 }

 .image-wrapper {
   display: inline-block;
   width:200px;
   padding: 10px;
  }

  #image-container {
    color: #898989;
background:#F9F9F9;
border: solid 1px #ddd; 
border-radius:10px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
   }
.info-container{
    overflow: hidden;
}
   .img-info {
display: block; 
   }

   .alignleft {
float:left;
   }

   .alignright {
float:right;
   }

<div id="container">
        <div class="image-wrapper">
            <div id="image-container">
                <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
                <span class="img-info">Title:</span>
                <span class="img-info">Description:</span>
                <span class="img-info"><a href="#">Delete</a></span>
            </div>
            <span class="img-info alignright"><a href="#">Delete</a></span>
        </div>

        <div class="image-wrapper">
            <div id="image-container">
                <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
                <span class="img-info">Title:</span>
                <span class="img-info">Description:</span>
                <span class="img-info">Description:</span>
            </div>
            <span class="img-info alignright"><a href="#">Delete</a></span>
        </div> 

        <div class="image-wrapper">
            <div id="image-container">
                <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
                <span class="img-info">Title:</span>
                <span class="img-info">Description:</span>
            </div>
            <span class="img-info alignright"><a href="#">Delete</a></span>
        </div>

        <div class="image-wrapper">
            <div id="image-container">
                <img src="gallery_traditional_1.jpg" width="200" height="100"><br>
                <span class="img-info">Title:</span>
                <span class="img-info">Description:</span>

            </div>
            <span class="img-info alignright"><a href="#">Delete</a></span>
        </div>

    </div><!--end container -->

#container {
            width: 50%;
        }
        .image-wrapper {
            display: inline-block;
            width:200px;
            padding: 10px;
        }

        #image-container {
            color: #898989;
            background:#F9F9F9;
            border: solid 1px #ddd; 
            border-radius:10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 0px 0px 10px #888;
            -moz-box-shadow: 0px 0px 10px #888;
            -webkit-box-shadow: 0px 0px 10px #888;
            margin:5px auto;
            padding:5px;
            width:200px;
        }

        .img-info {
        display: block; 
        }

        .alignleft {
            clear: both;
            float:left;
        }

        .alignright {
            float:right;
            margin-top: -29px;
        }