html - 带有包装器和 float 元素的 CSS 布局

Question

我想要一个包装器，我需要在其中的左侧有一个 img，中间有一个按钮，右侧有一个文本，所有这些都在同一行中。为了居中我试过了

       {margin:0 auto;}

但它不起作用。同样使用单独的标签将元素移动一个行距。

CSS:

.wrapper
{
  width:70%;
  margin:0 auto; /* THIS IS WORKING FINE */
}

.custom_image
{
  float:left;
}
.custom_button
{
  background-color:#ff6600;
  border:2px; /* THIS IS NOT WORKING */
  border-color:#ccc; /* THIS IS NOT WORKING */
  padding:5px;
  margin:0 auto; /*THIS IS NOT WORKING */
}
.custom_text
{
  float:right;
}

HTML:

<div class="wrapper">
  <div class="custom_image"><img src="LOCATION"/></div>
  <div class="custom_button"><input type="submit" value="Submit"></div>
  <div class="custom_text">TEXTS</div>
</div>

Answer 1

更新

您已经非常接近了，您只需要将按钮从内部 div 中取出并将文本置于包装器的中心。像这样尝试:

HTML

<div class="wrapper">
  <input type="submit" value="Submit">
  <div class="custom_image"><img src="http://www.petside.com/sites/default/files/imagecache/thumbnail_50x50/grumpy_cat_photo.jpg"/></div>
  <div class="custom_text">TEXTS</div>
</div>

CSS

.wrapper {
    text-align:center;
    width:70%;
    margin:0 auto;
}
.custom_image {
  float:left;
}
.custom_text {
  float:right;
}

Demo