居中2个div可能并不总是同时出现在CSS中

Question

我正在为商店写一个CSS。我需要一个div来设置左侧的购买按钮，右侧的Prev和View Next图像正在工作。

我真正的问题是，由于PHP，有时“买”按钮不会出现。

当购买按钮不存在时，图像必须居中，因为如果不是，则左边是空的空间（购买按钮所在的位置）

首先我想margin:0px auto，但这需要设置一个恒定的宽度，对吗？

我一开始就认为这很简单。但我卡住了/

fiddle

Simplified to get the idea

我想我只是遗漏了一些我看不懂的基本知识。

HTML：

<div id="comprarbtn">
    <div id="wrappcomprarbtn">
        <input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
        <div id="naviminicc"> <a href="javascript:void(0);" class="prevImg"><img src="images/navmini_01.png" class="navmini1"></a>

            <img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <a href="javascript:void(0);" class="nextImg"> <img src="images/navmini_03.png" class="navmini3"></a>

        </div>
    </div>
</div>

CSS：

.comprarbtn { width:175px; 
  line-height:51px;  
  background-image:url(image.jpg); 
  border:0px; 
  font-size:12px; 
  padding-left:10px; 
  cursor:pointer; 
  overflow:hidden; 
  text-indent:0px; 
  z-index:10; 
}

#comprarbtn { 
  float:left; 
  position:absolute; 
  width:321px; 
  text-align:center;
  height:51px;  
  z-index:1000;  
  display:table-cell; 
  background-color:#f4f4f4;
}

#wrappcomprarbtn { margin:0px auto;}

#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 {  cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }


#navmini { width:135px; max-width:135px;}

Answer 1

我不确定你发布的CSS和HTML是怎么回事，但要实现理论上你想做的事情：

• 为包装div提供足够大的固定宽度，以包含按钮和图像
• 将margin: 0 auto设为中心，text-align: center。
• 制作内容display: inline

<强> CSS ：

.wrapper {
    width: 200px; /* Large enough to contain everything */
    text-align: center;
    margin: 0 auto;
}

.wrapper .buttons {
    display: inline;
}