Question

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

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

和css代码是：

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

    .btnCircle {
        position: relative;
        top: 0%;
        left: 0%;
        height:100%;
        background-repeat: no-repeat;
        background-size: contain;
    }

我想把“后面”的文字放在div的中间垂直...任何人都知道我是怎么做的？ THX

Answer 1

<强> CSS

写text-align：center;在.btn类

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

    }

<强> working fiddle

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

<强> fiddle

Answer 2

答案是：

CSS：

.btn{
        position: fixed;
        font-size: 25pt;
        width: 11%;
        top: 83%;
        left: 48%;
        height: 6%;
        padding-top: 10px;
        padding-left: 5%;
    }

    .btnCircle {
        position: absolute;
        top: 0%;
        left: 3%;
        height: 100%;
        background-repeat: no-repeat;
    }

HTML：

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

如何在div

2 个答案: