"Achieving Alignment: Placing a Div Element Inside an H

I am in the process of building a portfolio for freecodecamp, but I am having trouble with centering the button and row div on the page. The row div is necessary because I will be adding more buttons later on, but for now I just need the FCC button. Below are the html and css files I have created so far for my site. Any assistance would be greatly appreciated!

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%;
}
htmlcssheaderanchorcenter

Answer №1

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

That should do the trick. Take a look at the working example provided below

#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 content 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>

Answer №2

To center the div horizontally, you can set a specific width and use margin auto for both left and right values.

.container {
    margin: 0 auto;
    width: 200px; /*or any desired size*/
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing an issue with my JavaScript variable that keeps changing temporarily. How can I ensure that its value remains permanent? Console log

I recently made some edits to the p tags, but only one of them appeared to have changed. Upon trying to display the changes again, I couldn't see any difference. Here's the code snippet that I'm working with: $(document).ready(function() ...

javascriptjqueryhtml

The CSS for selecting the input[type="submit"] element is not functioning as expected

I apologize but I am encountering an issue with my .css stylesheet that covers styles for my input type buttons as shown below. input[type="submit"] input[type="submit"]:hover input[type="submit"]:focus The first three selectors are functioning well, how ...

cssbuttonsubmitonselect

Various objects are becoming engaged and chosen instead of a single item being focused on

In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index ...

htmlcssreactjsreact-reduxsemantic-ui-react

Is there a way to modify the video height so that it aligns with the dimensions of the

I'm currently trying to adjust the background video to fit the parent div, but I am facing issues with adjusting its height within the media query. Any suggestions on how I can resolve this problem? HTML <div class="hero"> <video ...

htmlcss

Swap out the svg element with an icon alternative

Transforming Circle Elements into Shopping Cart Icons I am attempting to change the appearance of my SVG circle elements to resemble shopping carts. Is there a method to completely alter the definition of a circle element in svg so that it displays a spec ...

javascripthtmlsvgd3.js

Having difficulty accessing object property using Chunk Template Engine

I am working on a project where I have created a list of objects and now need to retrieve the object name from a template using the Chunk Template Engine. The object list has been initialized as follows: html.set("items", new Item[]{new Item("Item 1", 2) ...

javaandroidhtmlstringchunk-templates

Tips for layering one div on top of another div

I'm looking for guidance on how to position my button divs over my Trapezoids in an overlay fashion. Currently, I have set up an array to store the colors and utilizing the map function to match each button with its corresponding color type. When a ...

javascripthtmlcss

What is the method for incorporating a currency symbol into a jQuery mask?

I have successfully implemented the mask on the <td> element of the table, but now I would like to include the currency symbol before the value as shown in the example below. if ($(this).attr('title')==='Value') { $(+ ...

phpjqueryhtml

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

Ways to immediately display an uploaded image as the background on a canvas

Using TypeScript, I am attempting to set an uploaded image as the background of a canvas. However, I am facing an issue where the image only loads properly after the user has uploaded it two times. How can I ensure that the image has finished loading befor ...

htmlangulartypescript

What makes styling the iconic Browse button (file input) such a challenge?

Many people are curious about how to style a file input in an HTML form, as evidenced by the plethora of well-known techniques available. However, I am more interested in understanding why we encounter such technical limitations that seem so trivial and fr ...

htmlcss

Manipulating jQuery Element Values

I have a set of checkboxes that I need to bind to my MVC model. To achieve this, I am trying to capture the checkbox values and store them in a hidden input field with the appropriate Id for binding to my model. @foreach (var answer in question.Answers) { ...

jqueryasp.net-mvc-3html

The DXTreeview feature in AngularJS restricts the expansion of branches

My MVC5 project contains an Index.aspx file, but when I run it in VS2013, only the top branches of the tree are visible without any option to expand them. Resharper confirms that my references are correct. Being new to HTML5 and Angular programming, I am ...

angularjshtmlgoogle-chromeasp.net-mvc-5devextreme

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return <button {...props} sty ...

cssreactjsmaterial-uijsx

What are some ways to ensure text stands out against a gradient backdrop?

Is there a way to ensure that text adjusts automatically to a background transition from one color to another using only CSS? I've tried using "mix-blend-mode:difference" from a forum, but it had no effect on the text. .container{ color: white; ...

csshtmlbackground-colorlinear-gradients

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...

javascriptjqueryhtmlcss

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss