在h1居中div

我正在嘗試爲freecodecamp創建一個投資組合，但是我找不到如何居中按鈕，或div在頁面上標記爲「行」。我需要行div，因爲我稍後會添加更多按鈕，但現在我只需要FCC按鈕。下面是我的網站到目前爲止的html和css文件。歡迎任何幫助！在h1居中div

HTML：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" href="css/style.css"> 

<!-- Web page starts here --> 
<body id="body"> 
    <section id="land"> 
     <h1 id="mpp" class="text-center"> My Personal Portfolio </h1> 
     <div class="row" id="btnrow"> 
      <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a> 
     </div> 
    </section> 
    <section id="intro"> 
    </section> 
</body>

CSS：

#body { 
    height: 100vh; 
    width: 100%; 
} 

#mpp { 
    font-family: Monospace; 
    font-size: 50px; 
    color: white; 
    padding-top: 15%; 
    margin: 0; 
} 
#land { 
    background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg); 
    width: 100%; 
    height: 100vh; 
} 
#fcc { 
    background-color: #016403; 
    text-decoration: none; 
    color: #FFFFFF; 
    font-size: 17px; 
    position: inherit; 
} 
#btnrow { 
    right: 50%; 
}

來源

2016-07-27 Zach Melendez

#btnrow { 
    display: flex; 
    justify-content: center; 
}

應該做的伎倆。見下面

#body { 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 

 
#mpp { 
 
    font-family: Monospace; 
 
    font-size: 50px; 
 
    color: white; 
 
    padding-top: 15%; 
 
    margin: 0; 
 
} 
 
#land { 
 
    background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg); 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
#fcc { 
 
    background-color: #016403; 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    font-size: 17px; 
 
    position: inherit; 
 
} 
 
#btnrow { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="css/style.css"> 
 

 
<!-- Web page starts here --> 
 
<body id="body"> 
 
    <section id="land"> 
 
     <h1 id="mpp" class="text-center"> My Personal Portfolio </h1> 
 
     <div class="row" id="btnrow"> 
 
      <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a> 
 
     </div> 
 
    </section> 
 
    <section id="intro"> 
 
    </section> 
 
</body>

來源

2016-07-27 01:13:53

因此，這確實使它居中，但是，當我更改爲瀏覽器大小時，按鈕大小增加。我試過寬度，但它是一樣的。有沒有什麼辦法讓按鈕成爲文本的寬度？ –

沒關係！使用設置的像素寬度，它似乎工作！雖然謝謝！ –

工作例如，你可以給DIV的寬度和使用保證金自動爲左，正確的價值觀，這將水平居中的元素。

.row { 
    margin: 0 auto; 
    width: 150px; /*or any measurement*/ 
}

來源

2016-07-27 01:34:49

在h1居中div

回答

相關問題