Я пытаюсь создать портфолио для freecodecamp, однако я не могу узнать, как центрировать кнопку, или div, помеченный как «строка» на странице. Мне нужна строка div, так как позже я буду добавлять больше кнопок, но на данный момент мне нужна только кнопка FCC. Ниже приведены мои файлы html и css для моего сайта. Любая помощь приветствуется!Центрирование div в h1
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%;
}
Так что это делает его центрированным, однако при изменении размера браузера размер кнопки увеличивается. Я пробовал ширину, но это то же самое. Есть ли способ сделать кнопку шириной текста? –
Nevermind! Используется ширина набора пикселей и, похоже, работает! Спасибо хоть! –