Question

这是我的链接http://jsfiddle.net/sanand29/7fh2em4f/

<div class="link1">
              <a href="#" class="square1"></a>
    <div>

与之对应的css部分

.link1
{
    display: block;
    margin-top: 15%;
    width: 78%;
    margin-left: 26%;
}
a.square1
{
    width: 50%;
    height: 50%;
    border: 1px solid red;
    padding: 9%;
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

我如何将任何文字放在广场的中心，以保持响应。

Answer 1

试试这个

<div class="link1">
          <div class="square1">Text to be centred</div>
</div>

和css

div.link1 {position: relative; width: 200px; height: 200px; border: 1px solid red;}
div.square1 {height: 20px; text-align: center; margin: auto; position: absolute; top: 0px; left:0px;      bottom:0px; right:0px;}

这会将文本保留在框的中间。事实上，它保持div与类square1居中 - 文本可能会溢出此div，具体取决于您选择的字体大小。如果您将div的高度设置为字体的高度，则可能会出错。

我如何在广场的中心写文字

1 个答案: