html - CSS 居中带自动边距但没有宽度

Question

我有一个用于 IAB 广告牌广告的子 header 容器，需要在广告应居中的容器中考虑两种不同的广告宽度。

我的问题是——是否有任何变通方法可以避免在使用自动宽度的居中元素上设置宽度？

我的基本代码结构如下:

<div class="sub_header_wrap" style="width:970px">
    <div class="ad" id="pencil00" style="margin:0 auto;min-height:30px">
        <!-- some ad code -- may be 970px or 950px wide -->
    </div>
</div>

我在这里找到了另一个解决方案，但我想在尝试使用它之前了解注意事项。 sub_header_wrap 容器中除了我的完整代码中的广告位置之外还有其他元素。他们可能会受到此解决方案的不利影响:

<div class="sub_header_wrap" style="width:970px;text-align:center">
    <div class="ad" id="pencil00" style="text-align:left;display:inline-block;min-height:30px">
        <!-- some ad code -- may be 970px or 950px wide -->
    </div>
</div>

此解决方案似乎在 .sub_header_wrap 容器中生成了额外的 4px 计算高度。

Answer 1

解决方案是...

<div class="sub_header_wrap" >
    <div class="ad" id="pencil00" style="margin:0 auto;min-height:30px;max-width: 970px;text-align: center;">
        <!-- some ad code -- may be 970px or 950px wide -->
    </div>
</div>

或

<div class="sub_header_wrap" style="width:970px;text-align:center">
    <div class="ad" id="pencil00" style="text-align:left;display:inline-block;min-height:30px; margin-bottom: -4px;">
        <!-- some ad code -- may be 970px or 950px wide -->
    </div>
</div>