CODEWITHSUNDEEP
htmlcss
nthdegreeburns
nthdegreeburns

Reputation: 73

CSS centering w/ auto margins BUT no width

I have a sub header container for IAB billboard advertising and need to account for two different widths of ad in a container where the ad should be centered.

My question is -- are there ANY workarounds to NOT having a width on a centered element using auto widths?

My basic code structure is as follows:

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

I found another solution here, but I'd like to know the caveats before attempting to use it. There are other elements in the sub_header_wrap container besides the ad position in my full code. They might be adversely affected by this solution:

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

This solution seemed to generate an additional 4px computed height in the .sub_header_wrap container.

Upvotes: 0

Views: 389

Answers (1)

csamiro
csamiro

Reputation: 71

The solution is...

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

or

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

Upvotes: 2

Related Questions