8

これが私の要約されたコードです

HTML:

<div class="wrap">
      <div>
      <img src="Pictures/titlepic.jpg" width="1035" height="200">
      <h1 class="text_over_image">Welcome to my Sandbox</h1>
      </div>
</div>

CSS:

.wrap{
    width: 1060px;
    margin: auto;
    }
.text_over_image{
    position: absolute;
    top: 20px;
    }

私は、、、たくさんのことを試しましたがleft: 50%、text-align:centerうまくいきませんでした。left: 50pxJavascript の値に応じてテキストの長さが変化することは目に見えないため、(または必要な値は何でも) 実行したくありませんでした。そのため、タイトルは短くても長くても構いません。

アイデア？

4

3 に答える 3

14

次の css を試してください。

.text_over_image{
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom:0;
 }

===編集===

.wrap {
    width: 1060px;
    height:auto;
    margin: auto;
    text-align:center;
    position:relative;
}
.text_over_image {
    position: absolute;
    margin: auto;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    color:#fff;
    height:100px;
}

ほら、JsFiddle

于 2013-09-11T07:23:29.883 に答える
3

HTML

<div class="wrap">
      <div>
       <h1 class="text_over_image">Welcome to my Sandbox</h1>
      </div>
</div>

CSS

.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
于 2013-09-11T07:29:57.563 に答える