I was able to figure out how to do most of what I wanted with this page, but I’m having trouble figuring out how to center the Table of Contents, dividers, and links within the navbar. I’ve tried different combinations using flexbox without luck. Any suggestions are appreciated. Thanks!
Thanks!
Your code so far
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=display-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Blood Pressure Measurement</title>
</head>
<body>
<main id="main-doc">
<div class="title">
<h1>How to Measure Blood Pressure</h1>
</div>
<div class="container">
<div class="navbar">
<nav id="navbar">
<header class="toc">Table of Contents</header>
<ul>
<div class="divider"></div>
<div class="link">
<li><a href="#why_measure_blood_pressure?" class="nav-link">Why measure blood pressure?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#when_should_i_take_my_blood_pressure?" class="nav-link">When should I take my blood pressure?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_does_blood_pressure_measurement_work?" class="nav-link">How does blood pressure measurement work?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_do_i_get_an_accurate_blood_pressure_measurement?" class="nav-link">How do I get an accurate blood pressure measurement?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_do_i_interpret_the_results?" class="nav-link">How do I interpret the results?</a></li>
</div>
</ul>
</nav>
</div>
<div class="sections">
<section class="main-section" id="why_measure_blood_pressure?">
<header>Why measure blood pressure?</header>
<p>Blood pressure measurement is a simple test to determine if your blood pressure is in the normal range. Blood pressure can be measured at home, in the doctor's office, or in certain pharmacies with blood pressure machines.</p>
<p>Measuring blood pressure is an important component of general health screening. If elevated blood pressure is detected early, it can be addressed with your doctor to reduce risk for conditions such as heart disease and stroke.</p>
<section class="main-section" id="when_should_i_take_my_blood_pressure?">
<header>When should I take my blood pressure?</header>
<p>Blood pressure can be measured daily. It is best to take your blood pressure measurement at the same time each day for consistency. Make sure to log your results every day for at least 2 weeks after starting new blood pressure medication.</p>
<p>Taking and logging your blood pressure in the week prior to your doctor's visit can be helpful. While your doctor will likely measure your blood pressure at the beginning of your visit, a single value is not as helpful as a recent trend. </p>
<h3>Is home blood pressure measurement reliable?</h3>
<p>The short answer is...yes! Believe it or not, home blood pressure measurement is the gold standard. Many patients can experience what is called "white coat hypertension" which is high blood pressure from the stress of being at the doctor's office. Home measurements taken at the same time every day tend to be more reflective of your normal, everyday blood pressure. </p>
</section>
<section class="main-section" id="how_does_blood_pressure_measurement_work?">
<header>How does blood pressure measurement work?</header>
<p>Blood pressure is measured by a cuff that connects to a pressure gauge. The cuff is wraped around the upper arm (above the elbow) and inflated to temporarily stop blood flow in the arm. The pressure may feel uncomfortable, but this is temporary.</p>
<p>The cuff is gradually loosened allowing blood flow to return in the measured artery. During this phase, the maximum and minimum pressure is determined and recorded as one number over the other, such as 120/80 mmHg. </p>
</section>
<section class="main-section" id="how_do_i_get_an_accurate_blood_pressure_measurement?">
<header>How do I get an accurate blood pressure measurement?</header>
<p>There are a few things to consider when measuring blood pressure to ensure the most accurate results:</p>
<ul>
<li>Avoid anything that can raise your blood pressure within 30 minutes of measurement including nicotine products, caffeine, and exercise.</</li>
<li>Sit at rest for at least 5 minutes before taking your measurement.</li>
<li>Sit upright in a chair with feel on the floor and arm resting comfortable on the table.</li>
<li>Make sure to empty your bladder beforehand.</li>
<li>Avoid using a cuff that is too small as this can artificially inflate your measurement.</li>
<li>Wrap the cuff around your upper arm just above your elbow. Either arm is fine.</li>
<li>It is best to wrap the cuff directly around the arm without any clothing in between the cuff and your skin</li>
</ul>
</section>
<section class="main-section" id="how_do_i_interpret_the_results?">
<header>How do I interpret the results?</header>
<p>You can use the following ranges for your reference:</p>
<ul>
<li><code>Normal</code> is 120/80 mmHg or lower.</li>
<li><code>Elevated</code> is 120 to 129/80 mmHg or lower.</li>
<li><code>Stage 1</code> high blood pressure is 130 to 139 mmHg or 80 to 89 mmHg.</li>
<li><code>Stage 2</code> high blood pressure is 140/90 mmHg or higher for either number.</li>
<li><code>Hypertensive crisis</code> is higher than 180 mmHg and/or higher than 120 mmHg.</li>
</ul>
<p>These are general guidelines and actual values may vary by age and medical condition. If your blood pressure is consistently higher than your usual range, you should notify your doctor and schedule an appointment. If you meet criteria for hypertensive crisis, you should head to the nearest emergency room.</p>
</section>
</div>
</div>
</main>
</body>
</html>
Hi there!
To center the content in the navbar, use Flexbox to align items vertically and horizontally. Adjust the divider and links to align properly and ensure they are responsive. Make sure the list structure (ul and li) aligns in the center, and test the layout for consistency across different screen sizes using media queries.
I have tried using flexbox to center these horizontally and vertically without luck. I’ve tried various combinations, including the following withing my .navbar:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=display-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Blood Pressure Measurement</title>
</head>
<body>
<main id="main-doc">
<div class="title">
<h1>How to Measure Blood Pressure</h1>
</div>
<div class="container">
<div class="navbar">
<nav id="navbar">
<header class="toc">Table of Contents</header>
<ul>
<div class="divider"></div>
<div class="link">
<li><a href="#why_measure_blood_pressure?" class="nav-link">Why measure blood pressure?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#when_should_i_take_my_blood_pressure?" class="nav-link">When should I take my blood pressure?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_does_blood_pressure_measurement_work?" class="nav-link">How does blood pressure measurement work?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_do_i_get_an_accurate_blood_pressure_measurement?" class="nav-link">How do I get an accurate blood pressure measurement?</a></li>
</div>
<div class="divider"></div>
<div class="link">
<li><a href="#how_do_i_interpret_the_results?" class="nav-link">How do I interpret the results?</a></li>
</div>
</ul>
</nav>
</div>
<div class="sections">
<section class="main-section" id="why_measure_blood_pressure?">
<header>Why measure blood pressure?</header>
<p>Blood pressure measurement is a simple test to determine if your blood pressure is in the normal range. Blood pressure can be measured at home, in the doctor's office, or in certain pharmacies with blood pressure machines.</p>
<p>Measuring blood pressure is an important component of general health screening. If elevated blood pressure is detected early, it can be addressed with your doctor to reduce risk for conditions such as heart disease and stroke.</p>
<section class="main-section" id="when_should_i_take_my_blood_pressure?">
<header>When should I take my blood pressure?</header>
<p>Blood pressure can be measured daily. It is best to take your blood pressure measurement at the same time each day for consistency. Make sure to log your results every day for at least 2 weeks after starting new blood pressure medication.</p>
<p>Taking and logging your blood pressure in the week prior to your doctor's visit can be helpful. While your doctor will likely measure your blood pressure at the beginning of your visit, a single value is not as helpful as a recent trend. </p>
<h3>Is home blood pressure measurement reliable?</h3>
<p>The short answer is...yes! Believe it or not, home blood pressure measurement is the gold standard. Many patients can experience what is called "white coat hypertension" which is high blood pressure from the stress of being at the doctor's office. Home measurements taken at the same time every day tend to be more reflective of your normal, everyday blood pressure. </p>
</section>
<section class="main-section" id="how_does_blood_pressure_measurement_work?">
<header>How does blood pressure measurement work?</header>
<p>Blood pressure is measured by a cuff that connects to a pressure gauge. The cuff is wraped around the upper arm (above the elbow) and inflated to temporarily stop blood flow in the arm. The pressure may feel uncomfortable, but this is temporary.</p>
<p>The cuff is gradually loosened allowing blood flow to return in the measured artery. During this phase, the maximum and minimum pressure is determined and recorded as one number over the other, such as 120/80 mmHg. </p>
</section>
<section class="main-section" id="how_do_i_get_an_accurate_blood_pressure_measurement?">
<header>How do I get an accurate blood pressure measurement?</header>
<p>There are a few things to consider when measuring blood pressure to ensure the most accurate results:</p>
<ul>
<li>Avoid anything that can raise your blood pressure within 30 minutes of measurement including nicotine products, caffeine, and exercise.</</li>
<li>Sit at rest for at least 5 minutes before taking your measurement.</li>
<li>Sit upright in a chair with feel on the floor and arm resting comfortable on the table.</li>
<li>Make sure to empty your bladder beforehand.</li>
<li>Avoid using a cuff that is too small as this can artificially inflate your measurement.</li>
<li>Wrap the cuff around your upper arm just above your elbow. Either arm is fine.</li>
<li>It is best to wrap the cuff directly around the arm without any clothing in between the cuff and your skin</li>
</ul>
</section>
<section class="main-section" id="how_do_i_interpret_the_results?">
<header>How do I interpret the results?</header>
<p>You can use the following ranges for your reference:</p>
<ul>
<li><code>Normal</code> is 120/80 mmHg or lower.</li>
<li><code>Elevated</code> is 120 to 129/80 mmHg or lower.</li>
<li><code>Stage 1</code> high blood pressure is 130 to 139 mmHg or 80 to 89 mmHg.</li>
<li><code>Stage 2</code> high blood pressure is 140/90 mmHg or higher for either number.</li>
<li><code>Hypertensive crisis</code> is higher than 180 mmHg and/or higher than 120 mmHg.</li>
</ul>
<p>These are general guidelines and actual values may vary by age and medical condition. If your blood pressure is consistently higher than your usual range, you should notify your doctor and schedule an appointment. If you meet criteria for hypertensive crisis, you should head to the nearest emergency room.</p>
</section>
</div>
</div>
</main>
</body>
</html>
To center the contents of your .navbar using Flexbox
Apply justify-content: center; and align-items: center; to .navbar to align its children vertically and horizontally.
Add display: flex; and flex-direction: column; to .navbar ul to center the ul contents.
Ensure proper alignment for .toc, .link, and nav li with text-centered styles and consistent padding/margins.
Use media queries to adjust .navbar width and height for responsiveness.
This will center everything inside .navbar and ensure it stays aligned on all screen sizes.
I’ve updated my code trying to follow your directions and still am not getting everything centered. The link text appears right of center and the dividers appear left of center. Only the .toc seems to be centered with text-align: center.
I don’t believe I added any asymmetric horizontal padding to any of these elements. Not sure why my container flexbox worked just fine but the navbar is being finnicky.
Fix .link alignment to Add width: 100% and justify-content: center to center content horizontally.
Center .divider using width: 100%, max-width: 255px, and margin: 10px auto for horizontal centering.
Align .navbar ul children by applying align-items: center and ensure ul spans the full width with width: 100%.
Center li elements Using width: 100% with display: flex, justify-content: center, and align-items: center.
I suggest you change dividers in html to actual css table elements, instead of customizing the div elements to make the navbar tabular. Review the table element in the link below:
