html - 如何在CSS中居中hgroup-6ren

html - 如何在CSS中居中hgroup

转载作者：可可西里更新时间：2023-11-01 13:05:12

如何使 hgroup 居中，我希望“欢迎来到甜蜜的螺旋”和“每一口都是幸福”居中。当您打开页面到全尺寸时出现问题，它不居中请帮助。这是 http://jsfiddle.net/yotzincastrejon/huco2sek/

<!DOCTYPE html>
<html lang="en">

<head>
<meta chartset="utf-8">
<title>Sweet Spirals</title>
<link href="sweetstyle.css" rel="stylesheet">
</head>

<body>
<header class="header">
<div class="row">
  <a href="/" class="header-logo" tabindex="-1">Sweet Spirals</a>
  <div class="header-right">
    <nav class="header-nav">
      <a href="/" class="header-link header-nav-link active">Home</a>
      <a href="/snippets" class="header-link header-nav-link">Shop</a>
      <a href="/ui-kits" class="header-link header-nav-link">About Us</a>
      <a href="/faq" class="header-link header-nav-link">FAQ</a>
      <a href="/search" class="header-link header-search-link" data-  toggle="search">Search</a>
    </nav>
    <form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
      <input type="search" name="q" placeholder="Search terms…">
    </form>
  </div>
 </div>
 </header>
 <div class="content">
 <div class="row">
  <section class="main">
    <hgroup class="heading home-heading" id="heading">
      <h1 class="major" id="major">Welcome to Sweet Spirals</h1>
      <h2 class="minor" id="minor">Happiness In Every Bite</h2>
    </hgroup>
    <aside class="aside">
      <div class="subscribe">
        <a href="https://www.facebook.com/sweetspirals" class="soc-button soc-button-facebook" rel="nofollow">Like</a>
      </div>
      <figure class="crackers2">
        <img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
        <figcaption>Peppermint Thins</figcaption>
      </figure>
      <div id="pepthinsbutton">
        <script src="https://gumroad.com/js/gumroad.js"></script>
        <a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy my product</a>
      </div>
      <figure class="crackers1">
        <img src="https://farm1.staticflickr.com/773/22899649574_e49e0b6316_k.jpg" alt="missing" height="100%" width="100%" />
        <figcaption>Chocolate Licorice</figcaption>
      </figure>
      <div id="licoricebutton">
        <script src="https://gumroad.com/js/gumroad.js"></script>
        <a class="gumroad-button" href="https://gum.co/Tlut" target="_blank">Buy my product</a>
      </div>
   </body>

   </html>

看看 css 的 fiddle

最佳答案

它集中在我从你那里 fork 出来并在下面链接的演示中；一些事情:
a) hgroup 已被弃用，您不应该使用它，因为它肯定会搞砸用户要求其 at 软件正常运行的文档大纲。
b) section.row 被设置为一个不稳定的宽度，大约 500px...所以我将其更改为 100%，重要的是要覆盖与之冲突的任何内容: