Question

如何集中hgroup，我希望＆＃34;欢迎来到甜蜜的螺旋＆＃34;和每一口的快乐＆＃34;居中。当您打开页面到完整大小时，会出现问题，它不会帮助中心。继承人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的小提琴

Answer 1

它集中在我从你分叉的演示中并在下面链接;一些事情：
a）hgroup已弃用，您不应该使用它，因为它肯定会搞砸用户软件正确运行所需的文档大纲。
b）section.row设置为一个不稳定的宽度，大约500px ...所以我把它改为100％，重要的是覆盖与它相冲突的任何东西：

.main{width:100% !important}

http://jsfiddle.net/jalbertbowdenii/bz82g8fe/7/

Answer 2

在你的CSS中寻找这个部分：

.main {
    float: left; /* Remove this line */
    width: 36.25em; /* Remove this line */
    margin: 2em 0 2.5em 
}

如何在CSS中居中hgroup

2 个答案: