Live Demo

Question

我正试图将网络研讨会注册页面的标题作为中心。

这是它正在做的事情： It's sliding off the left side...

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text.css" href="style.css">
    <title>Event Lander</title>
  </head>
  <body>
  <div class="header-rectangle">
  <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
  </div>
  </body>
</html>

这是我的CSS：

*{
margin:0px;
 }


.whiteheadline {
  font-size: 48px;
  font-family: "Open Sans";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: -55.656px;
  top: 39.867px;
  width: 682px;
  height: 48px;
  z-index: 4;
  align:center;
  display:inline;
}

.header-rectangle { 
  background-color: rgb(104, 115, 251);
  height: 143px;
  margin: 0px;
  width: 100%;
  text-align: center;
}

我尝试在html中添加内联标记，并在两个css类中多次添加不同的文本对齐方式。

我希望它填充浏览器的宽度，没有边距，并且页面中心的白色文字定义了类。

有人可以帮忙吗？谢谢！

Answer 1

如果还有什么我能做的，请告诉我。如果这对你不起作用，我会修改它：）

Intent.EXTRA_STREAM

* {
  margin: 0px;
}
.whiteheadline {
  font-size: 48px;
  font-family: "Open Sans";
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
  width:100%;
}
.header-rectangle {
  background-color: rgb(104, 115, 251);
  margin: 0px;
  width: 100%;
  text-align: center;
  width:100%;
  padding-top:20px;
  padding-bottom:20px;
}

Answer 2

<link rel="stylesheet" type="text.css" href="style.css">

使用type =＆＃34; text / css＆＃34; not type =＆＃34; text.css＆＃34;或者将它们全部删除，因为它不再需要。

更改在CSS上注释。基本上，您需要将absolute定位标题放在relative定位标题中。这样，当您应用左，右，底和/或顶部位置时，它将与您的标题相关，而不是与整个页面相关。

DEMO

<强> CSS

html, body {
    box-sizing: border-box;
    font: 400 16px/1.5'Open Sans';
    /* 100% of viewport width and height */
    height: 100vh;
    width: 100vw;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
.wrap {
    width: 100%;
    height: auto;
    margin: auto;
}
.whiteheadline {
    font-size: 3em;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    position: absolute;
    /* 50% of container (i.e. header) then subtract 50% of your title width (580px/2) */
    left: calc(50% - 290px);
    top: 39.867px;
    width: 580px;
    height: 48px;
    z-index: 4;
    /*align:center;<<<Not HTML5*/
    /*display:inline;*/
}
.header-rectangle {
    background-color: rgb(104, 115, 251);
    height: 143px;
    margin: 0px;
    width: 100%;
    text-align: center;
    /* If using position: absolute, make the container (i.e. header) position: relative */
    position: relative;
}

<强> HTML

<div class="wrap">
    <header class="header-rectangle">
         <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>

    </header>
</div>

Answer 3

<强> HTML

HornetQ

<强> CSS

<div class="header-rectangle">
    <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>

<小时/> 此中心水平和垂直对齐

* {
    margin:0px;
}


.whiteheadline {
    font-size: 48px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.header-rectangle { 
    background-color: rgb(104, 115, 251);
    text-align: center;
    line-height: 143px;
}

H1类不会居中

3 个答案:

Live Demo