3

画面を中央揃えにしようとしてLogoいますが、達成できません。助けてください。

HTML

<!-- Header Start -->
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft"><a href="#dashboard" data-transition="slide" data-direction="reverse"><img alt="" title="" src="images/top_lft_arrow.png"  /></a></div>
<div class="HeaderRgt"><div class="TopRedBox"><a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>Save</a></div></div>
<div class="HeaderLogo">LOGO</div>
</div>
 <!-- Header Ends -->

CSS

.HeaderLogo 
{
    position: absolute;
    margin:0 auto;
    width: 100px;
    top:10px;
}

ここに画像の説明を入力

4

7 に答える 7

2

2 つの可能性:

   .HeaderLogo {
    width: 100%;
    text-align: center;
}

または

html

<div class="HeaderLogoWrapper"><div class="HeaderLogo">LOGO</div></div>

CSS

.HeaderLogoWraper {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
于 2013-09-09T06:13:54.053 に答える
1

これを行う 1 つの方法は、クラス ラッパーを使用してすべてのdivタグを別のタグに配置することです。divその後、ラッパー クラスに CSStext-align: center;を追加すると、ヘッダーが中央揃えになります。

これは、このFiddleに示されています。それが役に立てば幸い。

于 2013-09-09T06:12:57.527 に答える
0

I hope this will work for you

Can you use margin-left: property instead of margin.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<head>
    <style type="text/css">
        .HeaderLogo
        {
          position: absolute;
          width: 100px;
          top:10px;
          margin-left:45%;
        }
    </style>
</head>

<body>
  <div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">

<div class="HeaderLft">
  <a href="#dashboard" data-transition="slide" data-direction="reverse">
    <img alt="logo" title="" src="images/top_lft_arrow.png"  />
  </a>
</div>

<div class="HeaderRgt">
  <div class="TopRedBox">
    <a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>
      Save
    </a>
  </div>
</div>

<div class="HeaderLogo">LOGO
</div>

</body>
</html>

I hope this will work, and if it isn't working, then you can set position:relative

于 2013-09-09T06:57:01.590 に答える
0

画像を中央に配置したい場合は、CSS プロパティの background-position を使用して行うことができます。

.MastHead {
 background-image: url('mylogo.png);
 background-position: top;
}

MDN のリファレンス: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position?redirectlocale=en-US&redirectslug=CSS%2Fbackground-position

誰かがまだそれらを使用している場合、IE6では機能しません（IE7ではわかりません）...

于 2013-09-09T06:31:21.547 に答える
0

これを試して 

        .HeaderLogo 
         { position: absolute; 
          margin:0px; auto; 
          width: 100%;
          text-align:center;
          }

デモ

于 2013-09-09T06:17:45.067 に答える