Question

我正试图将我的 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;
}

enter image description here

Answer 1

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

这显示在Fiddle中。希望它有所帮助。

Answer 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%;
}

Answer 3

喜欢这个

<强> demo

<强> CSS

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

<强> demo1

.MastHead {
    border: 1px solid red;
}
.HeaderLogo {
    margin: 0 auto;
    width: 100px;
    text-align:center;
    float:left;
}
.TopRedBox{
    float:right;
}

Answer 4

试试这个

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

DEMO

Answer 5

如果您想使图像居中，可以使用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，它将无法在IE6中运行（对IE7不确定）...

Answer 6

我希望这对你有用

您可以使用 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

Answer 7

按照这里的说明操作。 https://www.w3schools.com/css/css_align.asp

.className { margin: auto; }

这应该有效！

在标题中心对齐徽标

7 个答案: