中心

中心

关注
发信
关注(28)粉丝(399)

html - 为什么我的资源中心不

嗨，我正在创建一个带有整页图像，导航等的标题。覆盖图像，上面有文字，欢迎用户使用该网站，显示地址，显示平日和周末的营业时间，还显示商家的电话号码。

但是，我无法使内容位于图像的中心，因为它卡在了左侧。知道为什么会这样吗？我正在尝试将#openingContent和#addressHours居中



* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

h2,
h3,
h4,
h5 {
  margin-top: 0;
}

h3 {
  display: inline-block;
}

.main-header {}


/* ---- Navigation ---- */

.main-nav {
  position: absolute;
  top: 1em;
  right: 15.9em;
  z-index: 1;
}

.main-nav li {
  font-size: 17.5px;
  display: inline-block;
  list-style-type: none;
}

.main-nav li,
.name,
{
  font-family: 'Montserrat', sans-serif;
}

.main-nav a {
  font-size: .95em;
  color: #fff;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #FFAB0F;
}

.name a,
.main-nav a {
  padding: 10px 15px;
  text-align: center;
  display: block;
  text-decoration: none;
}

.name {
  font-size: .95em;
  color: #fff;
  display: inline-block;
  position: absolute;
  top: 1.34em;
  left: 6em;
  z-index: 1;
  line-height: 18px;
}

.name a {
  color: #fff;
  margin-top: -25px;
}

.contactButton {
  top: 1.24em;
  right: 6em;
  z-index: 1;
  position: absolute;
  border-radius: 100%;
  background-color: #004C4C;
  color: #fff;
  border: none;
  padding: 5px 10px;
}

.contactButton:hover {
  background-color: #fff;
  color: #000;
}


/*Image Header*/

#openingContent {
  font-family: 'EB Garamond', serif;
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 5em;
  text-align: center;
}

.headline {
  font-size: 55px
}

.headline2 {
  margin-top: 6%;
  font-size: 85px;
}

#addressHours {
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 15.5em;
  line-height: 1.8;
  font-style: italic;
  text-align: center;
}

.mainImage {
  filter: brightness(50%);
}

.fullPageImage {
  height: 100%;
  width: 100%;
  margin: auto;
  display: table;
  top: 0;
  background-size: cover;
}

<header class="main-header">
  <h1 class="name"><a href="index.html">Title</a></h1>
  <nav class="main-nav">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#about">Menu</a></li>
      <li><a href="#about">Enquiries</a></li>
      <li><a href=".reviews">Reviews</a></li>
      <li><a href=".footer">Location</a></li>
    </ul>
  </nav>
  <input type="button" class="contactButton" value="Bookings">
  <div id="mix">
    <div id="openingContent">
      <h1 class="headline">Welcome to</h1>
      <h2 class="headline2">Our restaurant</h1>
    </div>
    <div id="addressHours">
      <span class="address">This is our address.........</span><br>
      <span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
      <span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
      <span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
    </div>
  </div>
  <img src="http://lorempixel.com/200/200" class="fullPageImage mainImage"/>
</header>

<div class="about">
  <h2 class="customertitle">What our customers love about us!</h2>
  <section class="section">
    <h3 class="section-title">Great Coffee</h3>
    <p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
    <img src="http://lorempixel.com/15/15" class="image">
  </section>
  <section class="section">
    <h3 class="section-title">Free Wifi!</h3>
    <p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
    <img src="http://lorempixel.com/15/15" class="image">
  </section>
  <section class="section">
    <h3 class="section-title">Loyalty Cards</h3>
    <p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
    <img src="http://lorempixel.com/15/15" class="image">
  </section>
</div>

最佳答案

将left: 50%;和´transform: translateX(-50%);添加到绝对定位的#openingContent中，将其移动到其容器的水平中心：
（顺便说一句：不要在img元素上使用结束标记！）



* {
    box-sizing: border-box;
}

html,body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}

h2, h3, h4, h5 {
    margin-top: 0;
}

h3 {
  display: inline-block;
}

.main-header{
}


/* ---- Navigation ---- */
.main-nav {
  position: absolute;
  top: 1em;
  right: 15.9em;
  z-index: 1;
}

.main-nav li{
  font-size: 17.5px;
  display: inline-block;
  list-style-type: none;
}

.main-nav li,
.name,
 {
    font-family: 'Montserrat', sans-serif;
}

.main-nav a {
    font-size: .95em;
    color: #fff;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #FFAB0F;
}

.name a,
.main-nav a {
  padding: 10px 15px;
    text-align: center;
    display: block;
  text-decoration: none;
}

.name {
  font-size: .95em;
  color: #fff;
  display: inline-block;
  position: absolute;
  top: 1.34em;
  left: 6em;
  z-index: 1;
  line-height: 18px;
}

.name a {
  color: #fff;
  margin-top: -25px;
}

.contactButton {
  top: 1.24em;
  right: 6em;
  z-index: 1;
  position: absolute;
  border-radius: 100%;
  background-color: #004C4C;
  color: #fff;
  border: none;
  padding: 5px 10px;
}

.contactButton:hover {
  background-color: #fff;
  color: #000;
}
/*Image Header*/
#openingContent {
  font-family: 'EB Garamond', serif;
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 5em;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.headline {
  font-size: 55px
}

.headline2 {
  margin-top: 6%;
  font-size: 85px;
}

#addressHours {
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 15.5em;
  line-height: 1.8;
  font-style: italic;
  text-align: center;
}

.mainImage {
  filter: brightness(50%);
}

.fullPageImage {
  height: 100%;
  width: 100%;
  margin: auto;
  display: table;
  top: 0;
  background-size: cover;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Wake Cup Coffee House | Dublin</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Varela+Round|EB+Garamond|Roboto|Neuton|Slabo+27px" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="Analytics/analytics.js"></script>
  </head>
  <body>
    <header class="main-header">
      <h1 class="name"><a href="index.html">Title</a></h1>
      <nav class="main-nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#about">Menu</a></li>
          <li><a href="#about">Enquiries</a></li>
          <li><a href=".reviews">Reviews</a></li>
          <li><a href=".footer">Location</a></li>
        </ul>
      </nav>
      <input type="button" class="contactButton" value="Bookings">
      <div id="mix">
      <div id="openingContent">
        <h1 class="headline">Welcome to</h1>
        <h2 class="headline2">Our restaurant</h1>
      </div>
      <div id="addressHours">
        <span class="address">This is our address.........</span><br>
        <span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
        <span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
        <span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
      </div>
    </div>
      <img src="http://placehold.it/600x600/fca" class="fullPageImage mainImage">
    </header>

    <div class="about">
      <h2 class="customertitle">What our customers love about us!</h2>
      <section class="section">
        <h3 class="section-title">Great Coffee</h3>
        <p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
        <img src="images/coffee.png" class="image">
     </section>
     <section class="section">
       <h3 class="section-title">Free Wifi!</h3>
       <p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
       <img src="images/wifi.png" class="image">
    </section>
    <section class="section">
      <h3 class="section-title">Loyalty Cards</h3>
      <p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
      <img src="images/savings.png" class="image">
   </section>
 </div>
  </body>
</html>

关于html - 为什么我的资源中心不，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44460991/

10-15 02:14
Powered by LMLPHP ©2024 中心 0.026350