Question

我无法将页面服务区域中的内容水平放置。此外，我尝试在每个图像周围放置一个框和文本，但这似乎也没有用。我是网络开发的新手，所以我不确定这是否是我在HTML代码或CSS中做错了。关于如何解决这个问题的任何建议都会很棒。

body,
html {
  font-family: 'Arail'. serif;
  margin: 0;
  padding: 0;
  height: 120%;
}

nav {
  width: 100%;
  overflow: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111;
}

a.active {
  background-color: deepskyblue;
}

.hero-image h1 {
  font-size: 5em;
  font-family: sans-serif;
  color: aliceblue;
  text-shadow: black 0px 0px 10px;
}

.hero-image {
  background-image: url("books-ios-appdev-670x335.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.service1 {
  width: 298px;
  border: 3px solid #c1c1c1;
  margin: 20ox 10px;
  padding: 0 5px;
  float: left;
}

.service1 p {
  font-size: 14px;
  color: #636363;
  max-width: 250px;
}

.services {
  width: 1333px;
  margin: 0 auto;
}

.services h1 {
  font-size: 16px;
  font-weight: bold;
  background-color: #c1c1c1;
  color: #ffffff;
  padding: 10px 0;
  margin: 0 -6px;
  width: 500px
}

.image {
  max-width: 200px;
  margin: 15px 0 0 0;
}

.heading {
  text-align: center;
  font-size: 25px;
  color: #c1c1c1;
  margin: 100px 0 50px 0;
}

<!DOCTYPE html>
<html>

<body>

  <head>
    <link rel="stylesheet" href="servicesStyles.css" type="text/css">
  </head>
  
  <div class="menue">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="Second.html">Portfolio</a></li>
      <li><a href="howItWorks.html" class="active">Services</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>

  <div class="hero-image">
    <div class="hero-text">
      <h1>We Bring Ideas To Life</h1>
    </div>
  </div>

  <div class="heading">Services</div>

  <div align="center" class="services">
    
    <div class="services1">
      <h1>Web Design/iOS/Android</h1>
      <img class="image" src="web.png">
      <p>dmsf gnkskdf smds sdfsmdf mdf s,s smdfdkmfsm dsd dskf s dskdfs kdsfsfmks sdkfmdfskd sfsf gkfd</p>
    </div>

    <div align="center" class="services">
      <div class="services1">
        <h1>Design</h1>
        <img class="image" src="graphic.png">
        <p>dmsf gnkskdf smds sdfsmdf mdf s,s smdfdkmfsm dsd dskf s dskdfs kdsfsfmks sdkfmdfskd sfsf gkfd</p>
      </div>

      <div align="center" class="services">
        <div class="services1">
          <h1>Branding</h1>
          <img class="image" src="branding.png">
          <p>dmsf gnkskdf smds sdfsmdf mdf s,s smdfdkmfsm dsd dskf s dskdfs kdsfsfmks sdkfmdfskd sfsf gkfd</p>
        </div>

        <div align="center" class="services">
          <div class="services1">
            <h1>Copyrighting</h1>
            <img class="image" src="copyright.png">
            <p>dmsf gnkskdf smds sdfsmdf mdf s,s smdfdkmfsm dsd dskf s dskdfs kdsfsfmks sdkfmdfskd sfsf gkfd</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  
</body>

</html>

在CSS中水平构造内容

0 个答案: