html - 居中 2 个可能不会总是同时出现的 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;
}