为什么我的内容中心不会

时间：2017-06-09 14:58:58

标签： html css

您好我正在创建一个带有整页图片，导航等的标题。覆盖图像我有文本欢迎用户访问网站，显示地址，显示工作日和周末的开放时间，还显示业务的电话号码。

但是我无法将内容放在图像的中心位置，而是放在左侧。知道为什么会这样吗？我正试图将#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>

3 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果我正确地回答您的问题，则不应将<img>用于背景图片。而是使用CSS body { background-image: url("your_image.jpeg"); }

然后将文本与中心对齐可能是使用CSS属性text-align: center

答案 2 :(得分：0)

也许改变它？

    .parent {
      position: relative;
      background-image: url("img/image.png");
      background-color: #cccccc;
    }
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

以便父容器具有背景图像，并且子容器具有所有内容。孩子真的以父母为中心

#nav
{   
list-style-type: none;
height: 60px; 
width: 1000px;
float:left;
}
#nav > a
{
    display: none;
}

#nav li
{
position: relative;
float: left; 
list-style: none;
left: 0;
position: relative;
z-index:1;
}

/* first level */

#nav > ul
{
 height: 3em;
-moz-transition: opacity .5s ease .1s;
-webkit-transition: opacity .5s ease .1s;
-o-transition: opacity .5s ease .1s;
-ms-transition: opacity .5s ease .1s;
transition: opacity .5s ease .1s;

}
#nav > ul > li
    {
height: 100%;
float: left;
-webkit-transition: all .5s linear; 
-moz-transition: all .5s linear; 
transition: all .5s linear; 
    }

/* second level */

#nav li ul
{
    display: none;
    opacity: 0; 
    position: absolute;
    top: 100%;

/* TRY */
-moz-transition: opacity .5s ease .1s;
-webkit-transition: opacity .5s ease .1s;
-o-transition: opacity .5s ease .1s;
-ms-transition: opacity .5s ease .1s;
transition: opacity .5s ease .1s;
background: #ffffff;
}
#nav li:hover ul
    {
    display: block;
    opacity: 1; 

/* TRY */
-webkit-transition: all .5s linear; 
-moz-transition: all .5s linear; 
transition: all .5s linear; 
text-decoration:none;   
/* TRY */
-moz-transition: height .5s ease .1s;
-webkit-transition: height .5s ease .1s;
-o-transition: height .5s ease .1s;
-ms-transition: height .5s ease .1s;
transition: height .5s ease .1s;
    }

/* ADDED BY ME */
#nav li ul a {
margin: 0 0 0 0;
letter-spacing: 2px;
width: 120px;
text-align:left;
text-transform:uppercase;

}


@media only screen and ( max-width: 40em ) /* 640 */
    {
        html
        {
            font-size: 75%; /* 12 */
        }

        #nav
        {
            position: relative;
            top: auto;
            left: auto;
        }
            #nav > a
            {
                width: 3.125em; /* 50 */
                height: 3.125em; /* 50 */
                text-align: left;
                text-indent: -9999px;
                background-color: #000000;
                position: relative;
            }
                #nav > a:before,
                #nav > a:after
                {
                    position: absolute;
                    border: solid 2px #FFF;
                    top: 35%;
                    left: 25%;
                    right: 25%;
                    content: '';
                }
                #nav > a:after
                {
                    top: 60%;
                }

            #nav:not( :target ) > a:first-of-type,
            #nav:target > a:last-of-type
            {
                display: block;
            }


        /* first level */

        #nav > ul
        {
            height: auto;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
        }
            #nav:target > ul
            {
                display: block;

            }
            #nav > ul > li
            {
                width: 40%;
                float: none;
            }

                #nav > ul > li > a
                {
                    height: auto;
                    text-align: left;
                        background-color: #FFF;

                }
                    #nav > ul > li:not( :last-child ) > a
                    {
                        border-right: none;
                                                    border-top: none;
                        border-bottom: none;   


                    }


            /* second level */

            #nav li ul
            {
                position: static;

            }

#nav li ul a {
margin: 0 0 0 0;
letter-spacing: 2px;
background-color: #FFF;
text-align:left;
text-transform:uppercase;
width: 20em;

}
    }

请参阅https://css-tricks.com/centering-css-complete-guide/

特别是https://codepen.io/chriscoyier/pen/lgFiq

相关问题
最新问题