Isn’t there a lot of people who have been thinking like above and arrived at this article?
For horizontal movement like left justification and right justification with CSS, it is necessary to use properties properly according to the characteristics of HTML elements.
In this WEBCAMP MEDIA, we will use sample code to explain how to align elements to the left, right, and center with CSS.
- How to move an inline element horizontally
- How to move the element itself horizontally
I will explain the above items.
By reading this article, you will be able to freely move elements horizontally using CSS, so be sure to check it out!
Table of contents
- CSS text-align to left, right, and center values in an element
- Align the element itself to the left, right, or center with CSS margin
- summary
CSS text-align to left, right, and center values in an element
text-align is a CSS property that allows you to horizontally align elements inside a specified block element.
The values that can be specified for text-align are as follows.
- center: center the elements inside the block element
- right: right-justify the elements inside the block element
- left: Left justify the elements inside the block element
By specifying a specific value for text-align as shown above, the element can be moved in three directions: left justified, right justified, and centered.
The sample code explains how to move an element using text-align.
sample code
HTML
<body>
<div class="center">
<img src="pic/icon.png">
</div>
<p class="left">左寄せ</p>
<p class="right">右寄せ</p>
</body>CSS
.center{
text-align: center;
background-color: aqua;
}
.left{
text-align: left;
background-color: beige;
}
.right{
text-align: right;
background-color: chartreuse;
}In the above code, div tag and p tag, which are block elements, are prepared, and the image and text specified by the img tag, which is an inline element, are moved horizontally.
Execution result
If you want to horizontally move the text or image in the p tag, you can do so by specifying text-align to the parent block element.
Align the element itself to the left, right, or center with CSS margin
margin is a CSS property that adjusts the outer margin of an element.
To move the element itself with margin, specify the width of the element with the width property and specify auto on the opposite side of the place you want to move.
If you are using margin for the first time, please check it out as it is explained in detail in the article below.
I will explain the actual specification method using sample code.
sample code
HTML
<body>
<p class="center">中央寄せ</p>
<p class="left">左寄せ</p>
<p class="right">右寄せ</p>
</body>CSS
.center, .left, .right{
width:300px;
}
.center{
margin: 0 auto;
background-color: aqua;
}
.left{
margin-right: auto;
background-color: beige;
}
.right{
margin-left: auto;
background-color: chartreuse;
}In the above code, the width of the block element to be moved is specified with “width: 300px;”.
The “auto” value specified for each element has the function of turning all remaining margins into margins.
Therefore, when you want to align the element to the left, specify “margin-right: auto;” on the right side, which is the opposite direction, and the margin other than the width of the element will be specified as the margin on the right side.
For the same reason, specify auto for left margin when aligning to the right, and auto for both left and right when aligning to the center.
Note that when moving elements with margin, specifying width to align horizontally and not creating margins will not work.
summary
This time, I explained how to align elements to the left, right, and center with CSS. How was it?
Use text-align to move elements inside block elements, and maring to move the elements themselves.
The method of moving elements horizontally is often used in web production, so this article will help you remember it.
