M2- Text alignment

Question 1

Which CSS property do you use to align text?

Answer 1

text-align: Text alignment can be set to left, right, center and justify.

EXAMPLE:
p {
text-align: center;
}

Question 2

What is the difference between text alignment and HTML element alignment in CSS?

Answer 2

Text alignment is straightforward and handled with the text-align property. HTML element alignment is more complex because it involves the box model and document flow. Aligning an HTML element requires changing its box model properties and understanding how it interacts with the document flow.

Question 3

How do you center-align an HTML element in CSS?

Answer 3

To center-align an HTML element:

1) Set a width on the element.
2) Set the element’s margin property to auto.

Question 4

How do you center-align an inline element like an img in CSS?

Answer 4

To center-align an inline element like an img, you must first change it to a block-level element and then set its margins to auto. For example:
HTML
< div class=”parent”>
< img src=”photo.png” class=”child”>
< /div>

CSS
.child {
display: block;
width: 50%;
margin: auto;
}

Question 5

How can you be more precise with margin settings when centering elements?

Answer 5

You can set only the left and right margins to auto while specifying specific values for the top and bottom margins. For example:
.child {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}

Question 6

How do you left or right align elements using CSS?

Answer 6

The two most common ways to left or right align elements are by using the float property and the position property.

Question 7

How do you right-align an element with the float property?

Answer 7

To right-align an element using the float property:

1) Use the float property set to right.
2) The text content within the parent element will wrap around the floated element.

HTML
< div class=”parent”>
< img src=”photo.png” class=”child”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
< /div>

CSS
.child {
float: right;
}

CSS rule will align image to the right, and the text will wrap around it