html - margin : 0 auto; not working on a div the needs to inherit a width from 2 enclosed elements

Question

我正在尝试将火焰和航向居中放置在白框的中间。

HTML

        <div class="contentheading">
            <div class="floatmiddle">
                <img src="images/flame45x45.png">
                <h3>Receive only the email you want.</h3>
            </div>
        </div>

CSS

.contentheading {
       position: relative;
       height: 45px;
       margin-top: 30px;
       width: 636px;           //this is the full width of the white box//
}

.floatmiddle {
       margin: 0 auto;
       height: 45px;
       display: block;
}

.contentheading img {
       position: absolute;
}

.floatmiddle > h3 {
       font-family: "signika";
       font-size: 22px;
       font-weight: 500;
       color: #37434f;
       height: 45px;
       line-height: 45px;
       margin: 0 0 0 60px;
       text-align: center;
       vertical-align: top;
       position: absolute;
}

我需要 .float 中间部分继承两个封闭元素的宽度 - 图像(45 x 45px)和文本(我拥有的每一章的长度都不同)所以我需要一个类/公式所以我可以直接穿过并弹出标题，无论标题长度如何，标题和火球都将在白色 div 中居中。

Answer 1

您可以使用 display: inline-block; 将此 div 居中。

http://jsfiddle.net/d8gyd9gu/

HTML

<div class="contentheading">
    <div class="floatmiddle">
        <img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
        <h3>Receive only the email you want.</h3>
    </div>
</div>

CSS

.contentheading {
       height: 45px;
       margin-top: 30px;
       width: 636px;
       text-align: center;
}


.floatmiddle {
       height: 45px;
       display: inline-block;
}

.contentheading img {
       float: left;
        margin: 20px 10px 0px 0px;
}

.floatmiddle > h3 {
       font-family: "signika";
       font-size: 22px;
       font-weight: 500;
       color: #37434f;
       height: 45px;
       line-height: 45px;
       padding: 0px 0px 0px 60px;
}