0

タイトルはほとんどそれを言っています、私はそれにテキストがある画像を持っています. そして、水平方向と垂直方向の両方で、常に中央に配置したいと思います。今、私はそれをやっています

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
}

しかし、異なる解像度では機能しないようです。このレイアウトを実現する他の方法はありますか？

ウェブサイトへのリンク（黄色のヘッダーは中央に配置したいテキストです）

4

6 に答える 6

1

次のように、画像タグの前にスパンを移動するだけです。

<div class="header">
    <span class="headerText">Ubytovna Stavařov Přerov</span>´
    <img src="css/title578145459.png" class="headerImage left">
    <img src="css/title756941752.png" class="headerImage right">            
</div>

ヘッダーテキストcssは

.headerText {
    float: left;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40%;
    z-index: 1;
    color: yellow;
    font: bolder 6em justus;
    font-style: oblique;
}

それでうまくいくはずです。

于 2013-03-17T19:42:52.663 に答える
1

別の方法は、次の CSS を .headerText スタイルに追加することです。

width: 100%;
text-align: center;
left: 0;

それが役立つことを願っています。

于 2013-03-17T19:48:40.950 に答える
0

垂直方向の中央に配置するための簡単な修正。

.headerText{
  position:absolute;
  top:0px;
  line-height:190px;
}

ヘッダーの単語が折り返される場所に応じて、さまざまな解像度の高さを変更するようにしてください-大量の行の高さで折り返されると、かなり見栄えが悪くなります。

水平方向に中央に配置するのもかなり速いです：

.headerText{
  position:absolute;
  left:0px;
  right:0px;
  text-align:center;
}

すべて一緒に今：

.headerText{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  line-height:190px;
  text-align:center;
}
于 2013-03-17T20:40:26.357 に答える
0

それはそれをするべきです：

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
    margin: auto;
}
于 2013-03-17T19:43:26.807 に答える
0

最初：後のコロンをheaderText削除する必要があります。2番目：headerTextクラスセレクターだと思いますので、の前にを付ける必要があり.ますheaderText

画像を。として設定することをお勧めしbackground-imageます。次に、次のことを行うことができます。

.headerText {
    background-image: url(path/to/your/image.png)
    background-position: center center;
    background-repeat: no-repeat;
}

ただし、画像をページのコンテンツの一部にする必要があるのか​​、それともデザイン/スタイルのみであるのかによって異なります。この解決策は、後者の場合にのみ意味があります。

于 2013-03-17T19:44:57.300 に答える
0

テキストを div または span に配置できる場合は、それらを簡単に中央に揃えることができます。掘り出し物で、あなたがmeedするのは

margin: auto
于 2013-03-17T19:42:09.027 に答える