html - 带有包装器和浮动元素的 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;
}

演示