Style and design are paramount elements of a website. When an item is even just a slight bit off-center or misaligned, it shows. However, by using the power of CSS alignment basics, you can make sure all of your design elements sit just as you need them to. Using CSS to center a div or text on a page, for example, lets you bring the attention where you want it. Let’s take an easy to learn look at how to use alignment in CSS.
Getting Set Up
Before we begin, we need to get our workspace set up and ready. The first step is to set up a quick test HTML file. If you don’t have one ready, simply copy the content below into your preferred text editor and save it with a title of your choosing.
<!DOCTYPE html>
<html>
<head>
<title>Udacity CSS Alignment Tutorial</title>
</head>
<body>
<div>You got this!</div>
</body>
</html>Note: You will notice that we have a “div” tag sitting in the body of the file with text inside. This is simply there to serve as a visible target for our changes as we move through the tutorial.
With the HTML file setup, we will now get a quick CSS stylesheet ready and linked for use. If you need help follow these steps to do so.
- Open a new empty file in your preferred text editor., (preferable in the same location as the HTML file we will be using).
- Save that file as “Alignment.css,” (or a name of your choice).
- Inside your HTML file add the following to link your new CSS stylesheet so we can use it.
<head>
<title>Udacity CSS Alignment Tutorial</title>
<link rel="stylesheet" href="Name of your CSS Stylesheet Here.css">
</head>With that simple setup out of the way, we can move on to seeing just how effective, (and easy), alignment can be with CSS.
Setting Basic Text Alignment
Now we can dig into the direct CSS alignment options that deal with our vertical and horizontal alignments. To start off, let’s add some details to our empty div so we can watch it move around our page. In your CSS file, add the following from below.
div { width: 400px; border: 10px solid black; padding: 20px; margin: 50px; }
Save this and open your HTML file in a browser. Once you do, you should notice it appears as it does in the image below.
As you can see, we now have a black box with our text within it. It sits on the left-hand side for the moment. Suppose we wanted to move this box to the right instead? Here is how we would do it.
Basics CSS Alignments
Going back to our CSS file, we will add a text alignment option to the div. We do this by calling on the “text-align” property. We can set the value of this property to indicate how we want the align the targeted content, (in this case our div). Take a look at the last added to the CSS file targeting the div in our document.
div { width: 400px; border: 10px solid black; padding: 20px; margin: 50px; text-align:right;" }
The property of “text-align” is used with its value set to “right.” This tells the browser to take the text content of our div and align it to the right. Try this out on your own file and you should see the following result based on the CSS alignment work we did.
Note how the text inside the div is now aligned with the right-hand side. Using CSS to center the text is as simple as editing the text-align property value from “right” to “center.” Once you do this, save the file and refresh the HTML page. Your text should now appear centered as shown below.
CSS Alignments with Floats
Floats are another way to help organize content on a page. When you align content using a float, you’re telling the browser that you want to align the selected content in such a way that other items may pass along it leaving it in place. In a way, the other content can just “float” on by. To try this out, we can add a few more items to our HTML document.
In the following example, you can see we added two additional divs to the body of the HTML document. Feel free to add these or similar elements to your own file to try this yourself.
<body> <div id="Item1">You got this!</div> <div id="Item2">Float #1</div> <div id="Item3">Float #2</div> </body>
Note: You can see in these newly added divs, that we’re assigning ids to each one. If you are unfamiliar with using ids and classes in HTML, this is simply a way to separate each div so we can “target” them via CSS with ease.
In our CSS file, you can see we added each div using the ids to separate them. See the code examples below.
#Item1 { width: 400px; border: 10px solid black; padding: 20px; margin: 50px; text-align: center; } #Item2 { width: 400px; border: 10px solid black; padding: 20px; margin: 50px; text-align: center; } #Item2 { width: 400px; border: 10px solid black; padding: 20px; margin: 50px; text-align: center; }
With these items set and saved, you should now see the following on your HTML page once refreshed.
Now we can try assigning float values to the divs to see how they react. In this example, we will add the float property to the first dive with the text inside saying “You got this!” We will set that value to be “right” to see it take effect.
#Item1 { float: right; width: 400px; border: 10px solid black; padding: 20px; margin: 50px; text-align:center; }
With that set and saved, you should now notice that the targeted div is now positioned to the right of the page.
What Happened and Why Does it Matter?
Notice that the selected div has indeed moved to the right-hand side. However, also take care to note that the other divs did not simply remain in place. You can see that they have moved up to take the empty space the other div left behind. As stated, the float allows content to move, (or float), around it. This can be an ideal choice if you want items such as a sidebar or menu setup for page navigation while still allowing content to freely display along with your desired constraints.
A Wide World of Options Ahead
This is simply a very basic introduction to how the matter of alignment is handled via CSS. Further concepts such as Flexbox and CSS Grid provide an absolutely massive impact on available possibilities that can be used for your desired styles or site requirements. Learning the ins and outs of every single option may not be possible, but knowing that those options exist provides you with ample knowledge that your CSS roadblocks are only temporary. As a result, your skill and style will only grow as you learn.
Front-end web design is a popular and valuable skill set in this digital-driven world. If you are ready to embrace the better part of yourself that yearns for something more, enroll in Udacity’s Front End Web Developer Nanodegree to make that happen now.
