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

一种方法是使用类包装器将所有div标签放入另一个标签中。div然后，您可以在包装类上添加 CSS text-align: center;，这将使您的标题居中对齐。

这在这个Fiddle中显示。希望能帮助到你。

于 2013-09-09T06:12:57.527 回答
0

我希望这对你有用

您可以使用margin-left:属性而不是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>

我希望这会起作用，如果它不起作用，那么你可以设置position:relative

于 2013-09-09T06:57:01.590 回答
0

像这样

演示

css

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

演示1

.MastHead {
    border: 1px solid red;
}
.HeaderLogo {
    margin: 0 auto;
    width: 100px;
    text-align:center;
    float:left;
}
.TopRedBox{
    float:right;
}
于 2013-09-09T06:14:17.877 回答
0

尝试这个 

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

演示

于 2013-09-09T06:17:45.067 回答
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

按照此处的说明进行操作。https://www.w3schools.com/css/css_align.asp

.className { margin: auto; }

这应该工作！

于 2017-07-13T11:39:45.727 回答