I’ve tried padding, vertical-aligning, text-aligning, and reviewed The Box Model in order to center the h1 text within the circle-shaped 100% border-radius white margin and none of that has worked so far.
Height and width need to be the same, and we achieve vertical centering with the line-height property. Horizontal alignment is done with text-align and centering of the H1 is done with the margin property.
When I use line-height, it spaces out each line of the text, spreading out the paragraph, but what if I want the text to still be compact together and centered in the circle? I am trying get the text vertically arranged in the center, it’s currently sticking to the top side.
We can only use line-height if there is no line-wrapping inside the button. Shrink the text to a few characters as possible and set the font-size sufficiently small enough to fit inside the circle. Then line-height will work as expected.
There is another possibility which will need more structure. Put a container inside the circle and give it a top margin to center vertically, then text align center the text. Be sure the text doesn’t overflow the container.
Sorry for the late answer. Text will stretch the container to whatever size is needed to contain it all.
We specify line-height as a single value. It has nothing to do with centering, albeit a convenient way to vertically center when used explicitly for the purpose, with no wrap. . The property is balanced so we don’t need to consider margins or padding. This will explain why we set it to the container height.
The property is really intended as a way to space the lines in a paragraph. line-height: 2em; is effectively emulating double line-spacing on a manual typewriter. The above technique piggy-backs on the mechanics.
The material says “You can create a border that is a perfect circle by setting the radius equal to the height of the box”. But should it say “You can create a border that is a perfect circle by setting the radius equal to the 50% of the height of the box”?
Either approach is valid. There may be a best practice style guide recommendation which would be accompanied by the reasoning. See what comes up when you search for ‘CSS style guide border-radius’.
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.
"(…) You can create a border that is a perfect circle by setting the radius equal to the height of the box, or to 100% . "
But I think that it should be 50% is enough to create a perfect circle (or an oval if W/H aren’t the same value) because radius is height/2. In fact, I’ve been testing and it works with any value from 50% to 100%.
In the Border Radius exercise in CSS, what do the numbers in the brackets stand for in the following code section?:
border: 3px solid rgb(22, 77, 100);
That is the color function, which we give three arguments. The first is the value for RED, the second, the value for GREEN, and the last the value for BLUE. The range of those values is 0…255.
I thought we were supposed to privilege the html coding of section/main/article/aside as opposed to div, nonetheless all “sections” of this exercise are divided with the div element. Which approach should we privilege? How can I know which one to use?
I notice in this lesson the following: " The code in the example above will set all four corners of the border to a radius of 5 pixels (i.e. the same curvature that a circle with a radius of 5 pixels would have)."
Is that correct? Wouldn’t a box with a radius of 5px on all four corners create a circle with a radius of 10px?
) below!
) to up-vote the contribution!