0

左にimg、中央にボタン、右にテキスト、すべて同じ行に必要なラッパーが必要です。私が試した中心に

       {margin:0 auto;}

しかし、それは機能していません。また、別のタグを使用すると、要素が 1 行スペースで移動します。

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>
4

1 に答える 1

0

アップデート

ボタンを内側から取り出し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;
}

デモ

于 2013-04-27T18:38:06.817 に答える