Troubleshooting, Centering, Positioning

Question 1

List two ways you can troubleshoot inline elements that run together.

Answer 1

1. You use the line-height property of the inline container of the inline element and give it a value.
2. You change the display from inline to inline-block or block and give it a margin top property value.

Question 2

How do you center inline elements horizontally?

Answer 2

You give the parent block element that contains the inline element a text-align property value of center.

Question 3

How do you center inline elements vertically?

Answer 3

You use the vertical align property on the inline element.

Note that this may or may not work.

Question 4

How do you center a block element horizontally?

Answer 4

You may give the block element a width and set the left and right margins to auto or set the margins to auto.

Question 5

How do you center block elements vertically?

Answer 5

There is no straight forward way to center block elements vertically.
The best way is to use flexbox.

Question 6

Define a positioned element.

Answer 6

A positioned element is one that has had its position property changed from its default values.

Question 7

Define the CSS position property.

Answer 7

The CSS position property governs how elements in a page are positioned and how they respond to the position adjusting values of top, right, bottom, and left.

Question 8

List all the CSS position property values.

Answer 8

1. Static (The default)
2. Fixed
3. Relative
4. Absolute

Question 9

Flexbox reduces the use case of what CSS position property values?

Answer 9

Relative and absolute

Question 10

List all the characteristics you know of the CSS position value of static ( static elements).

Answer 10

1. It is the default for all elements.
2. Static elements follow the “flowing text” model of layout.
3. Static elements completely ignore the positioning adjusting properties of top, right, bottom and left.
4. The properties that influence static elements are:

a) margins
b) paddings
c) floats
d) The display property values of block, inline, inline-block, etc