Html 如何在div中间放置img和text_Html_Css

Html 如何在div中间放置img和text

html css

Html 如何在div中间放置img和text,html,css,Html,Css,我有一个包含img和文本的Div 我想像按钮一样使用那个Div 以下是我的html代码： <div id="p6btnBack" class="btn"> <img id="p6btnCircleBack" src="img/back.png" class="btnCircle" /> Back </div> 我想把“Back”文本放在div的垂直中间…有人知道我是怎么做的吗？ thxcss

我有一个包含img和文本的Div 我想像按钮一样使用那个Div 以下是我的html代码：

 <div id="p6btnBack" class="btn">
            <img id="p6btnCircleBack" src="img/back.png" class="btnCircle" />
            Back
        </div>

我想把“Back”文本放在div的垂直中间…有人知道我是怎么做的吗？ thx

css

body {
    width: 100%;
    height: 100%;
}
div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

写文本对齐：居中；在.btn类中

btn {
        position: fixed;
        width: 10%;
        top: 24%;
        left: 2%;
        height: 7%;
        font-size: 25pt;
        background-size: cover;
    text-align:center;

    }

demo1 css

body {
    width: 100%;
    height: 100%;
}
div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

html

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>


正文

答案是：

CSS:

HTML:

 <div id="p6btnBack" class="btn">
        <img id="p6btnCircleBack" src="img/back.png" class="btnCircle" />
        Back
    </div>


返回

你能发布一个问题的工作代码吗。我不明白你到底想要什么？你试过JSFIDLE吗？是的。。。正如我说的，你的代码只是把所有元素放在div的中心，我想把文本放回中间vertical@combo_ci现在您尝试演示1，问题是我们在div中有img，并且希望返回div中间的文本

 <div id="p6btnBack" class="btn">
        <img id="p6btnCircleBack" src="img/back.png" class="btnCircle" />
        Back
    </div>