如何用CSS统一对齐元素？Web开发新手代码求助

Hey there! Let's work through this alignment issue you're facing. Your current CSS uses a hacky combination of width: 170% and negative margin-left to position the .notation container—this approach is fragile and will break across different screen sizes. Let's swap it out with modern, reliable CSS methods to get consistent alignment for your elements.

1. Flexbox-Based Alignment (Recommended) #

Flexbox is the easiest way to create consistent, responsive alignment. We'll use a parent container to center your table wrapper, then ensure the table behaves well inside it.

First, adjust your HTML to include a parent container (if you don't already have one):

<div class="page-wrapper">
  <div class="col-md-12 table-responsive notation" ng-if="(documentType !== 'jobDescription')">
    <table class="mytable">
      <!-- Your table content goes here -->
    </table>
  </div>
</div>

Then update your CSS with these rules:

/* Parent container: Centers child elements horizontally */
.page-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 1rem; /* Prevents elements from touching screen edges on small devices */
}

/* Replace your old .notation styles with this */
.notation {
  width: 100%;
  max-width: 800px; /* Optional: Limits maximum width for large screens */
  margin: 0 auto; /* Extra insurance for centering */
}

/* Refine your table styles for consistency */
.mytable {
  width: 100%; /* Makes table fill its container */
  margin: 1em auto;
  font-size: 90%;
  background-color: #f8f9fa;
  color: #222;
  border: 1px solid #a2a9b1;
  border-collapse: collapse;
}

table.mytable > * > tr > td {
  border: 1px solid #a2a9b1;
  padding: 0.2em 0.4em;
}

2. Quick Fix: No Parent Container Needed #

If you don't want to add a parent container, you can fix the .notation class directly by removing the hacky width and negative margin, and using auto margins to center:

.notation {
  width: 80%; /* Use a reasonable percentage or fixed width (e.g., 900px) */
  max-width: 1200px;
  margin: 0 auto; /* Horizontally centers the container */
}

.mytable {
  width: 100%; /* Ensures table fills its wrapper */
  /* Keep your existing table styles here */
}

Why Your Original Code Was Problematic #

• width: 170% forces the container to overflow the viewport, which creates horizontal scrollbars on smaller screens.
• The fixed negative margin-left: -238px only works for one specific screen size—resize your browser, and the alignment will break immediately.

Extra Tip for Bootstrap Users #

Since you're using Bootstrap's col-md-12 class, you can leverage Bootstrap's built-in grid system for even less custom CSS. Wrap your .notation div in a .container or .container-fluid class, and Bootstrap will handle the centering automatically:

<div class="container">
  <div class="col-md-12 table-responsive notation" ng-if="(documentType !== 'jobDescription')">
    <!-- Table here -->
  </div>
</div>

Just make sure to remove the old width:170% and margin-left:-238px styles from .notation when using this method.

内容的提问来源于stack exchange，提问作者ganesh kaspate